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

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

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

当前位置:主页 > 技术资讯 > 开发技术 > 前端开发技术 >

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

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

文章来源:https://www.023niu.com 发布时间:2019-07-08 22:25:34 围观次数:
分享到:

摘要:本文为 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)的网站的页面加载分析:

image.png


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


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

image.png

  Reddit的Javascript脚本在几个不同设备(低,中,高)上的执行时间。


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


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

image.png

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


  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为什么越来越多的人选择逃离?

热门资讯

鼠标向下滚动