2019 年 JavaScript 优化方向:下载和执行

阅读数:1532 2019 年 7 月 31 日 08:00

2019 年 JavaScript 优化方向:下载和执行

谷歌 Chrome 技术经理 Addy Osmani 最近介绍了 JavaScript 成本研究的最新成果。他认为,由于 JavaScript 解析和编译速度的改进,现在其主要开销则集中到不断增加的脚本下载和 CPU 执行时间上。

在《 2018 Java S cript 成本》(Cost of JavaScript In 2018)一书中,Osmani 指出,如果一个交互式网站需要经常混合使用 CSS、JavaScript、图像和字体,那么“JavaScript 永远是开销最大的那一部分”。一个 170KB 大小的图像与同样大小的 JavaScript 脚本相比,虽然两者的下载时间相同,但前者的处理速度要比后者快得多,因为图像解码和绘制的速度比脚本解析、编译和执行的速度快得多。

事实上,JavaScript 的快速处理意味着更快地下载、解析、编译和执行脚本。

脚本下载时间主要由脚本大小和网络性能决定,而解析和编译时间则是由 JavaScript 引擎中使用的技术和设备性能(CPU 和内存性能)所决定。执行时间明显受到 CPU 的制约。

对于 V8 引擎,Osmani 提到了自 2018 年以来在解析 / 编译时间方面的改进

自 Chrome 60 以来,V8 中的原始 JavaScript 解析速度提高了 2 倍。与此同时,由于 Chrome 中其他同时进行的优化工作,原始解析(和编译)成本变得不那么明显 / 突出。Chrome 61 解析 Facebook 的 JS 所用的时间,现在可以让 Chrome75 同时解析 Facebook 的 JS 和 6 倍于 Twitter 的 JS。

二进制AST 提案,目前处于 TC39 进程的初始阶段(第一阶段)。该提案提供了 JavaScript 抽象语法树的二进制编码,旨在进一步提高解析性能。

Osmani 认为下载和执行时间是现在最需要关注的瓶颈。由于移动设备用户在整个互联网用户中所占的比例越来越大,执行和下载时间受到从低端到高端移动设备(设备性能差异非常大)的影响:热节流(thermal throttling)、不同的缓存大小、CPU、GPU 以及网络技术(2G 到 5G)等。

为了减少下载时间,Osmani 建议:

  • 最小化 JavaScript 包的体积,尤其是面向移动设备的 JavaScript 包。
  • 将大型捆绑包(超过 50-100KB)拆分为更小的捆绑包,从而更好地利用 HTTP/2 多路复用功能。

Osmani 提到需要对移动设备特别对待:

在移动设备上,尤其是考虑到网络速度,你需要更少的运行时间,同时还要保持较低的内存使用率。

为了减少执行时间,Osmani 建议“避免那些使主线程忙碌的冗长任务,并且尽可能地提升页面交互的速度”。此外,开发人员应该避免使用很大的内联脚本(超过 1KB)。

完整的成本研究包括支撑数据(主要集中在V8 引擎和Chrome 浏览器)、图表以及实用建议。JavaScript 成本研究在 2017 年首次发表,并于 2018 年和 2019 年更新。

原文链接:

The Cost of JavaScript 2019: Improvement Opportunities Now Mostly in Download and Execution

评论

发布