使用 Chrome 開發者工具的 lighthouse 功能分析 web 應用的性能問題
每當您著手提高網站的負載性能時，請始終從 audit 開始。 審計有兩個重要功能：
- 它為您創建了一個基線來衡量後續更改。
- 它為您提供有關哪些更改將產生最大影響的可行提示。
本文使用下面這個網站應用作為例子。
https://glitch.com/edit/#!/tony
點擊 Tony， 然後再點擊 remix this，得到一個名稱隨機生成的專案：
點擊 show 按鈕，打開一個新的 tab. 按 F12 打開 Chrome 開發者工具，切換到 Lighthouse 標籤頁：
Establish a baseline
只選中 Performance 和 Mobile 的checkbox：
點擊 generate report，審計工作就開始了：
確保在隱身模式下生成 report，以避免 Chrome 擴展的干擾。
稍後，審計報表就生成了：
報告頂部的數位是網站的整體性能得分。 稍後，當您對代碼進行更改時，您應該會看到這個數位上升。 更高的分數意味著更好的性能。
指標部分提供網站性能的定量測量。 每個指標都提供了對性能不同方面的洞察。 例如，First Contentful Paint 會告訴您內容何時首次繪製到螢幕上，這是使用者感知頁面載入的一個重要里程碑，而 Time To Interactive 標誌著頁面似乎已準備好處理使用者交互的時間點。
每一個選項都可以點擊 learn more 深入研究：
Passed audits 包含的是該 web 應用通過了的審計專案：
Diagnostics 欄目下就是該應用存在可以改進的地方：
更多Jerry的原創文章，盡在："汪子熙"：
