安基網 首頁 腳本 JavaScript 查看內容

Google Chrome 工程師:JavaScript 不容錯過的八大優化建議

2019-7-9 03:32| 投稿: xiaotiger |來自: 互聯網


免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!

摘要: 【摘要】本文為 Google Chrome 團隊的開發項目工程師 Addy Osmani 在PerfMatters 2019 網頁性能大會發表的“JavaScript性能優化”(https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)的演講,其分享了處理 JavaScript 的腳本優化建議,大幅地減少了下載時間和執行時間。 ...

【摘要】本文為 Google Chrome 團隊的開發項目工程師 Addy Osmani 在PerfMatters 2019 網頁性能大會發表的“JavaScript性能優化”(https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)的演講,其分享了處理 JavaScript 的腳本優化建議,大幅地減少了下載時間和執行時間。

視頻地址:https://youtu.be/X9eRLElSW1c(需科學上網)

作者 | Addy Osmani

譯者 | 蘇本如 責編 | 屠敏

出品 | CSDN(ID:CSDNnews)

以下為譯文:

在過去的幾年中,由于瀏覽器的腳本解析和編譯速度的提高,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%。下圖是一個具有典型工作負載的網站(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腳本了。

讓我們深入研究一下這些改進是如何實現的?偟膩碚f,腳本資源可以在worker線程上進行流式解析和編譯,這意味著:

  • V8引擎可以在不阻塞主線程的情況下解析和編譯JavaScript。

  • 當整個HTML解析器遇到



小編推薦:欲學習電腦技術、系統維護、網絡管理、編程開發和安全攻防等高端IT技術,請 點擊這里 注冊賬號,公開課頻道價值萬元IT培訓教程免費學,讓您少走彎路、事半功倍,好工作升職加薪!

本文出自:https://www.toutiao.com/a6711243691316478471/

免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!


鮮花

握手

雷人

路過

雞蛋

相關閱讀

最新評論

 最新
返回頂部
洗衣店赚钱联系澳洁 河南泳坛夺金20分钟 辽宁快乐12手机版投注 秒速赛车9码平台 排列七开奖结果公告 现在理财产品哪个好 甘肃快3人工计划 七乐彩开奖视频直播现场 北京十一选五玩法及奖金 五分彩定位胆公式计算 东北彩票论坛818