使用Chrome Performance對頁面進行分析優化
摘要：
錄製結束後，會在右側生成一份分析報告，大體樣式如下所示，直接看上去可能花花綠綠會有點蒙，我們來逐個解釋各個部分及標識的意思及作用
三大時間
你可以在上面的圖上看到三條豎線：
藍線代表DOMContentLoaded事件
綠線代表首次繪製時間
紅線代表...
錄製結束後，會在右側生成一份分析報告，大體樣式如下所示，直接看上去可能花花綠綠會有點蒙，我們來逐個解釋各個部分及標識的意思及作用
三大時間
你可以在上面的圖上看到三條豎線：
- 藍線代表DOMContentLoaded事件
- 綠線代表首次繪製時間
- 紅線代表load事件
FPS
FPS是用來分析動畫的主要效能指標，如果能保持60FPS的話，則證明不錯。主要包括以下幾點
- 上面的綠色區域標識各個時段的FPS狀態，一般來說，綠色長條越高，說明FPS越高
- 如果你在綠條上面發現一個紅色的長條，說明該幀存在嚴重問題，可能會造成卡頓
- 你可以在下面檢視各個區間的實際幀的值是多少
CPU
綠色調下面的黃色和其他顏色混合的區域代表CPU圖示，表明在各段時間內，CPU在各種處理上所花費的時間。
下面的Summary會顯示選中事件內各種處理的總時間, 包括:
- 藍色，代表HTML檔案
- 黃色，代表指令碼
- 紫色，代表樣式
- 綠色，代表媒體檔案
- 其他，代表資源
正常來說，React這種框架通過虛擬DOM,diff演算法等，將更改合併，減少了不必要的DOM更新操作，從而減少了實際的Render時間
在下面CPU詳情中，你可以檢視各個元件/方法的實際CPU耗時，檢視到底是哪裡佔用的耗時最多，可以針對其進行定位及優化。同時你可以看到他是在進行mount還是update操作。
若事件長條的右上角出現了紅色的小三角，則說明這個事件需要特別注意，有可能存在問題。
雙擊長條，可以在Summary顯示詳細資訊，點選對應的連結，可以跳轉到對應程式碼處
同樣，對應的小紫條出現了紅色小三角，則說明有可能存在很多reflow警告
主要優化點
在分析過程中，對應的幾個引數往往說明了我們頁面執行時優化需要關注的幾個點。
Javacript計算
避免觸發大量視覺變化的計算降低應用效能，找出耗時較長的Evaluate Script事件，啟用 ofollow,noindex">JS分析器 進行定位。下圖介紹了幾點常用的問題和解決方案：( from )
樣式
避免大量的樣式重計算。這個比較基礎，可以參考 縮小樣式計算的範圍並降低其複雜性
佈局
- 避免過早佈局，導致重複渲染，可以先批處理樣式讀取，最後進行寫入
- 避免迴圈，強制瀏覽器彷彿進行重新計算佈局。
總結
我們介紹了Chrome Performance的使用方法，以及幾點常見的問題和解決策略
- 不要編寫會強制瀏覽器重新計算佈局的 JavaScript。將讀取和寫入功能分開，並首先執行讀取。
- 不要使您的 CSS 過於複雜。減少使用 CSS 並保持 CSS 選擇器簡潔。
- 儘可能地避免佈局。選擇根本不會觸發佈局的 CSS。
- 繪製比任何其他渲染活動花費的時間都要多。請留意繪製瓶頸。