ES6是真的“省”!空间&时间!

时间:2021-1-8 作者:admin

难度:容易

前言

我们在开发前端Web页面时经常需要做性能优化,通常的优化方案大多集中在网络层,比如增加CDN缓存、合并网络请求、代码压缩、资源进行Prefetch和Preload等等,但面对前端页面的上MB的代码似乎有点力不从心,尤其是virtual-dom框架盛行的当下,一个react框架包就达100+KB,更别提复杂冗长的业务代码!可网页秒开是每一个前端人的终极目标,当所有网络层面、结构层面的优化都做的差不多时,剩下就是对代码的优化了!而这是一场白刃战!需要花费大量的精力!

今天我想从编程语言层面上简单对比一下ES5与ES6在代码输出尺寸上有啥不同!

ES5 vs ES6

函数继承

函数继承使用ES6语法编写比ES5要减少约75%左右的代码,当然如果将继承方法抽象出来复用,整体代码量在绝对值上也会多几十行,实际编程中,这块会交给框架或者Babel来处理,但是我们需要了解。

对象合并

对象合并减少的代码行数差不多是50%

this绑定

在JS中,this绑定的明确是一件不太容易的事情,我们经历闭包时代,bind时代(实际也是闭包),箭头函数时代,在最新的语法中,虽然很抽象,但我的理解是箭头函数实质是对bind方法的再一次的语法简化,不过这不是本文关注的重点,我们知道函数的调用在js中是非常频繁,虽然从上述例子中只看到减少几个字节,但放在我们业务代码里,这种简化所带来的代码量减少将是非常可观的。

异步函数

在ES6中,async/await的出现大大简化我们异步编程的代码量,这里仅仅将其转化为Promise写法,实际使用中(部署到ES5环境)还需要加载Promise的polyfill,节省的字节数量至少4KB以上。

关于ES6 vs ES5代码对比还有很多,这里仅列举部分,上述事例代码参见Github.

本质上,JS语言向前发展的一个重要动力就是代码需要写的越来越精简,因为它天生依赖网络传输,而在互联网的世界里,每个字节都是钱!

进一步

ES6给前端程序员编程带来了极大便利,但是能在用户终端上运行ES6才是最终胜利,这里推荐两位博主在ES6部署上的实验总结,写的非常好,很值得借鉴:

  1. 前端生产环境部署 ES6 代码
  2. Deploying ES2015+ Code in Production Today

推荐文章比较长,我这里借用里面的实验数据展示一下ES6的威力,让各位有一个直观的感受,以下是针对同一个站点的js文件大小与执行时间的对比:

版本 文件尺寸 执行时间
编译 压缩 Gzip 压缩 测量值 平均值
ES2015+ 80K 21K 184ms、164ms、166ms 172ms
ES5 175K 43K 389ms、351ms、360ms 367ms

从上述对比不难看出,ES6无论在代码传输大小以及执行时间都明显优于ES5

总结

ES6不仅仅是ES5的语法糖,更多是前端性能优化的终极解决方案,代码的空间省下来可以让程序跑的更快,程序猿/媛们的时间省下来可以谈谈人生聊聊理想!

ES6,值得拥有!

参考

kangax.github.io/compat-tabl…

myst729.github.io/posts/2018/…

philipwalton.com/articles/de…

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。