Web性能優化系列之一工具篇

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 工具
• 時間線事件參考