WEB性能優化，是前端不可避免的問題，值得拿來好好思考一番，然後搞明白：

• 為什麼需要考慮這個問題
• 如何去衡量這個問題
• 如何解決這個問題

每個人都有自己的對問題的思考方式和路徑，今天不妨就按照我的思路走一走吧。

雖然，這篇文章的標題突出的是工具，但具體闡述這個問題之前，先回答：為什麼需要考慮這個問題？答案，因為WEB性能差，用户體驗差...

為了提高面對WEB應用時的用户體驗，我們決定對WEB應用的性能進行優化。

• A: 優化什麼？
• B: 哪裏有問題，優化哪裏呀
• A: 哪裏有問題？
• B: 你查查看呀
• A: 怎麼查？
• B: 我不知道呀

看來進行優化之前，關鍵是找到問題在哪裏，對症下藥，才是WEB性能優化的準繩。那麼就需要藉助一些工具來幫助我們發現問題啦。今天只介紹一款工具：Chrome DevTools 的 Performance 面板（以前叫做Timeline）。

Performance 面板的組成

説明：這部分內容最初翻譯自chrome的開發者文檔，但是已經有中文文檔啦，所以更詳細的內容可以查看這裏：如何使用 Timeline 工具，下面簡要的介紹一些該工具的基本信息。

該面板由四部分組成：

1. Controls：包含控制鍵：記錄、停止記錄、記錄哪些內容選項
2. Overview：統觀全局
3. Flame Chart：CPU堆棧可視化（包含所有事件，為Overview中的CPU部分）
4. Details：事件詳細分析

在Flame chart中有三條垂直的虛線，它們分別代表：

• 藍色代表DOMContentLoaded事件
• 綠色代表開始繪製（paint）的時間
• 紅色代表load事件

當選擇某事件，detail則顯示與該事件相關的信息；否則顯示所示時間範圍內的相關信息。

Performance 記錄的內容

前面提到Performance原來叫Timeline，説明使用這個面板可以記錄一條時間線，稍微準確一點説，記錄的是一條事件時間線。
當頁面加載，或者用户和頁面發生了交互，總會有一系列的事件發生，這些事件是屬於瀏覽器的事件：瀏覽器要加載資源，解析HTML，解析CSS，執行JS，繪製，佈局，迴流，組合繪製，調用GPU等等。所有這些操作，都以事件的形式暴露出來，最終形成一條事件時間線。當我們沿着這條線索去分析網頁加載、交互過程中的時間損耗的時候，就能找到是什麼導致WEB應用加載慢或卡頓了。
啊哈，查看這裏：時間線事件參考，你就知道所有的事件啦。如果很好奇，現在就F12打開瀏覽器（chrome瀏覽器，或者chrome內核的瀏覽器）的開發者工具，然後切換到Performance面板下，記錄一段網頁交互操作的時間線，然後看看都有哪些事件出現了吧。

後記

現在是不是大概知道怎麼去發現影響WEB性能的原因了呢？定量的衡量時間損耗，可以幫助我們定位問題，從而刨根問底，最終把問題定位到代碼中。

參考資料

請不要忽視上面提到的參考資料哦：

• 如何使用 Timeline 工具
• 時間線事件參考