記一次網頁性能問題定位

由於某個頁面實在加載的太慢了，因此就想好好的定位下慢的緣由。

這裏我使用了 Chrome DevTools 的 Performane 面板來進行網頁性能分析，它能夠記錄和分析應用在運行時的全部活動，是發現應用中可覺察性能問題的最佳位置。

Command+Shift+N 打開 Chrome 隱身瀏覽器，隱身瀏覽器可排除擴展程序對 Performane 分析的干擾。Command+Opiton+I 打開控制檯，切換到 Performance 選項卡。

如何記錄？

• 按 開始記錄，操做完或頁面加載完後按暫停中止記錄。
• 按 從新載入頁面並記錄，會在載入完成後自動中止記錄。

中止記錄後Performance面板會自動載入分析結果，以下所示：

每一個區域的做用：

• FPS（frames per second）: 每秒幀數。這個是用來分析動畫的一個主要性能指標。綠色豎線越高，FPS越高。FPS圖表上的紅色塊表示長時間幀，長時間幀的位置極可能會出現卡頓。能保持在60的FPS的話，那麼用戶體驗就是不錯的。下面有個Frame區域，鼠標劃上去能夠看到FPS的具體數值。
• CPU：CPU資源。此區域圖表指示哪些類型的事件消耗CPU資源，不一樣顏色塊表示的含義跟Summary是同樣的。
• Network：顯示了網絡請求的順序及耗時，每個彩色條表明一個資源請求，彩條越寬，請求的時間越長。
• Main：展現了主線程運行情況。X軸表明着時間。每一個長條表明着一個event。長條越長就表明這個event花費的時間越長。Y軸表明了調用棧（call stack）。在棧裏，上面的event調用了下面的event。
• Summary：每種類型事件的執行時間。

FPS：看FPS這裏綠條的高度很低，而且出現了紅條，Frame這裏的幀數顯示紅條部分幾乎爲0，能夠說至關卡頓了。
CPU：腳本執行的時間佔了大頭，有10s之長

Network: 全部資源請求都會顯示在這裏，一開始有兩個資源並行請求，點擊彩色條，下面會顯示詳細的資源信息。

好比一開始同時請求的兩個灰條，根據資源大小能夠在 Network選項卡下找到對應的請求資源

綠條的請求時間就很長，點擊後看到這張圖片的大小有1M，壓縮的空間很大。

Main：這裏顯示捕捉到的 JavaScript 堆棧信息。

能夠直接在頁面拖拽選擇指定時間段，觀察這段時間裏的詳細數據。

切換到Call Tree選項卡，也能看到詳細的執行步驟及執行時間：

把執行時間比較長的部分展開，右側有對應的代碼執行位置，展開到足夠細力度後就容易定位到代碼的位置。我這裏展開後耗時長的部分都是G2裏的代碼，說明個人G2圖表渲染時js執行的時間是整個js裏的大頭，也是優化的重點。

經過上面的分析，能獲得兩個優化點：
一、壓縮圖片資源，減小請求時間
二、優化G2圖表渲染代碼，減小js執行時間

如何使用 Timeline 工具
Chrome Devtool Performance使用指南