网站建设、公众号开发、微网站、微商城、小程序就找牛创网络 !

7*24小时服务专线： 152-150-65-006 023-68263070 扫描二维码加我微信

前端开发技术团结互助，让我们共同进步！

我们的优势： 10年相关行业经验，专业设计师量身定制设计师一对一服务模式，上百家客户案例！企业保证，正规流程，正规合作 7*24小时在线服务，售后无忧

JavaScript 不容错过的八大优化建议，来自Google Chrome 工程师

文章来源：https://www.023niu.com 围观次数：

分享到:

摘要：本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性能优化”（https: medium com @addyosmani the-cost-of-javascript-in-2018-7d8950fbb5d4）的演讲

视频地址：https://youtu.be/X9eRLElSW1c（需科学上网）

在过去几年中，由于改进了脚本解析和浏览器的编译速度，Javascript的成本结构发生了巨大变化。到2019年，处理Javascript的开销主要体现在脚本下载时间和CPU执行时间上。

如果浏览器的主线程忙于执行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％。下图是在高端台式PC上具有典型工作负载（Reddit.com）的网站的页面加载分析：

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

对于移动设备，在中端手机（如Moto G4）上实施Reddit的Javascript脚本需要比在高端手机（如Pixel 3）上长3-4倍，而在低端手机上（价格低于100美元）实施 Reddit在Alcatel 1X上的Javascript脚本需要花费6倍的时间：

Reddit的Javascript脚本在几个不同设备（低，中，高）上的执行时间。

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

当您努力优化JavaScript执行时，您需要了解可能长期主宰UI线程的长期任务。即使页面似乎已加载，这些长期任务也可能会拖累关键任务的执行。将长期任务分解为较小的任务。通过拆分代码并确定加载顺序，您可以更快地实现页面交互，并可能减少输入延迟。

应该分割垄断主线程的长期任务。

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

自Chrome版本60以来，V8引擎的原始JS的分辨率提高了两倍。与此同时，Chrome还做了其他工作来并行化解析和编译，这使得这部分成本开销对用户体验的影响不那么显着和关键。

通过将解析和编译工作转移到工作线程，V8引擎将主线程上的解析和编译工作量平均减少了40％。例如，Facebook下降了46％，Pinterest下降了62％，最大的改善是YouTube，下降了81％。这是基于现有的非主线程流解析/编译性能改进的进一步改进。

不同版本V8发动机的分析时间比较

我们还可以说明不同V8引擎对CPU处理时间的不同CPU版本的影响。如您所见，Chrome 61解析Facebook的JS脚本所需的时间允许Chrome 75解析相同的Facebook JS脚本和六个Twitter JS脚本。

Chrome 61解析Facebook的JS脚本所需的时间允许Chrome 75解析相同的Facebook JS脚本和六个Twitter JS脚本。

让我们仔细看看如何实现这些改进。通常，脚本资源可以在工作线程上进行流式处理和编译，这意味着：

V8引擎可以在不阻塞主线程的情况下解析和编译JavaScript。

当整个HTML解析器遇到

本文由 https://www.023niu.com 整理发布,转载请保留出处，内容部分来自于互联网，如有侵权请联系我们删除。

相关热词搜索：JavaScript JavaScript优化 Google Chrome工程师

上一篇：Vue.js为什么能击败了Angular和React，成为最受欢迎的JavaScript前端框架
下一篇：Jquery为什么越来越多的人选择逃离？

关于我们

重庆牛创网络科技有限责任公司是一群技术强大、思维活跃、拥有创新精神的年轻人创立，公司致力于为企业提供全面、周到、专业的互联网解决方案，提供网站建设、网络推广、网络安全审计、wifi营销认证、网站运营维护、域名注册、虚拟主机、企业邮局、企业形象设计等多种信息产品和服务。

联系我们

公司电话： 023—68263070
办公地址：重庆市北碚区金华路399号
邮箱：120481297@qq.com
技术咨询：15215065006

“互联网+”方案

重庆网站建设

备案图标渝ICP备19004889号-1 渝公网安备 50010902000896号

行业安全认证

前端开发技术团结互助，让我们共同进步！

JavaScript 不容错过的八大优化建议，来自Google Chrome 工程师

热门资讯

关于我们

联系我们

“互联网+”方案