JavaScript 不容错过的八大优化建议

　　高层级的实用指南

　　这对Web开发人员来说意味着什么?意味着解析(Parse)和编译(Compile)不再像我们曾经想象的那么慢了。所以开发人员在优化Javascript包时，要重点关注以下三大方面：

　　减少下载时间

　　确保Javascript包尽可能地小，特别是对于移动设备。较小的包可以提升下载速度、降低内存使用量，并减少CPU开销。

　　避免只有一个大的Javascript包;如果包大小超过50–100 KB，就将其拆分为几个小包。(借助HTTP/2协议的多路复用机制，多个请求和响应消息可以同时传输，从而减少额外请求的开销。)

　　对于移动设备上使用的Javascript包更要尽可能地小，一方面因为网络带宽的制约，另一方面需要要尽量减少内存的使用。

　　缩短执行时间

　　避免持续占用主线程并影响页面响应时间的长时任务，现在脚本下载后的执行时间成为主要的成本开销。

　　避免使用大型内联脚本(因为它们仍然需要在主线程上进行解析和编译)。

　　建议参考一条经验法则：如果一个脚本超过1KB，就不要将其内联(因为当外部脚本大小超过1KB时，就会触发代码缓存)。

　　为什么下载和执行时间很重要?

　　为什么优化下载和执行时间对我们很重要?因为对于低端网络而言，下载时间的影响非常之大。尽管4G(甚至5G)在全球范围内增长迅速，但大多数人的有效连接速度仍然远远低于网络的标称速度。有时当我们外出时，会感觉到网速下降到只有3G的速度(甚至更糟)。

　　JavaScript的执行时间对于CPU较慢的低端手机也非常重要。由于CPU、GPU，和散热限制的不同，高端和低端手机的性能差距巨大。这对JavaScript的性能影响明显，因为它的执行受到CPU性能的制约。

　　事实上，在Chrome之类的浏览器上，JavaScript的执行时间可以达到页面加载总耗时的30%。下图是一个具有典型工作负载的网站(Reddit.com)在一台高端桌面PC上的页面加载情况分析：

　　V8引擎下的Javascript处理时间占整个页面加载时间的10-30%

　　对于移动设备，与高端手机(如Pixel 3)相比，在中端手机(如Moto G4)上执行Reddit的Javascript脚本需要3-4倍的耗时，而在低端手机(价格低于100美元的Alcatel 1X)上执行Reddit的Javascript脚本更是需要6倍以上的耗时：

　　Reddit的Javascript脚本在几种不同设备(低端、中端和高端)上的执行时间。

　　注意：Reddit对于桌面和移动网络有不同的体验，因此MacBook Pro的执行结果无法与其他结果进行比较。

　　当你着手优化JavaScript的执行时间时，你需要留意可能长时间独占界面线程(UI Thread)的长时任务。即使页面看起来已经加载完成，这些长时任务也会拖累关键任务的执行。把长时任务分解成较小的任务。通过拆分代码并确定加载顺序，你可以更快地实现页面交互，并有望降低输入延迟。

　　独占主线程的长时任务应该拆分。

　　V8引擎如何提高Javascript解析/编译速度?

　　自Chrome 版本60以来，V8引擎的原始JS的解析速度增加了2倍。与此同时，Chrome还做了其他工作一些工作使得解析和编译工作并行化，这使得这部分的成本开销对用户体验的影响变得不是那么显著和关键了。

　　V8引擎通过将解析和编译工作转到worker线程上，使得主线程上的解析和编译工作量平均减少了40%。例如，Facebook降低了46%，Pinterest降低62%，而最大的改进是是YouTube ，降低了81%。这是在现有的非主线程流解析/编译性能改进基础上的进一步提升。

　　不同版本的V8引擎的解析时间对比

　　我们还可以图示对比不同Chrome版本的不同V8引擎对CPU处理时间的影响。可以看出，Chrome 61解析Facebook的JS脚本所花费的时间，可以供Chrome 75解析同样的Facebook的JS脚本，和6个Twitter的JS脚本了。

　　Chrome 61解析Facebook的JS脚本所花费的时间，可以供Chrome 75解析完成同样的Facebook的JS脚本，和6个Twitter的JS脚本了。

　　让我们深入研究一下这些改进是如何实现的。总的来说，脚本资源可以在worker线程上进行流式解析和编译，这意味着：

　　V8引擎可以在不阻塞主线程的情况下解析和编译JavaScript。www.81rz.com/ksbm/