- 原文地址：Shine a light on JavaScript performance with Lighthouse
- 原文作者：Addy Osmani
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：Raoul1996
- 校對者：calpa、GpingFeng
不確定 JavaScript 的開銷對於您那的使用者體驗來講是不是太高了？? Lighthouse 有 JavaScript 執行時間審計，用來衡量 JavaScript 對於頁面載入效能的影響。
讓我們一起試試吧？現在它已經在 Chrome DevTools Audits皮膚裡邊了。同樣可以通過訪問 WebPageTest 來使用。
對於上面的內容站點，移動裝置上的瀏覽器需要 51s（哎呀，太慢了）才能處理完主包。算上網路傳輸時間，使用者可能需要等待一分鐘才能和這個頁面進行互動 ⏳?
這是花在中等配置的移動裝置上的解析、編譯和執行指令碼的時間。dev.to（提供類似的內容體驗）能夠在對指令碼依賴最小的情況下載入他們的主包❤️
我們怎樣才能優化原始網站 JS 的效能呢？
只有當使用者真正需要前，才傳輸 JavaScript。我們可以使用像程式碼分割的技術來實現對剩餘部分的懶載入。我使用 DevTools 的 Code Coverage 功能提供幫助。
如果我開始記錄並載入上述網站，然後互動一段時間，我們可以看到可能不需要預載入大約 57% 的程式碼。對於可以按需載入的資源來說，這是很好的備選方案。
如果你之前沒有仔細看過 Lighthouse，那麼他會有很多有用的小模組，比如檢查你是否正確精簡或者壓縮指令碼；
如果你使用無頭瀏覽器進行自動化操作，那麼 Puppeteer 還有一個很有用的 code-coverage example 示例，可以在頁面載入的時候視覺化 JS 程式碼覆蓋率的使用情況。
總結.. ?
JavaScript 會對您的使用者體驗產生巨大的影響; Lighthouse 可以在這裡有效的改善。為了保持較低的 JavaScript 傳輸和處理時間：
- 只傳送你使用者需要的程式碼
- 精簡壓縮指令碼
- 移除未使用的程式碼和依賴
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。