[譯] 經過 Lighthouse 瞭解 JavaScript 性能

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。