使用Chrome DevTools的Timeline分析頁面性能

随着webpage可以承載的表現形式更加多樣化，通過webpage來實作更多互動功能，建構web應用程式已經成為很多産品的首要選擇。這種方式擁有非常明顯的優勢：跨平台、開發便捷、便于部署和維護等等，但随着功能的不斷積累，web應用程式也會變得越來越複雜。但是，我們仍然想要在webpage支援豐富的呈現形式的同時，讓頁面效果能夠達到>=60fps(幀)/s的重新整理頻率以避免出現卡頓，就需要我們使用一些比較直覺的方式來分析衡量頁面的性能問題，為性能優化方案提供依據。

為什麼是60fps?

我們的目标是保證頁面要有高于每秒60fps(幀)的重新整理頻率，這和目前大多數顯示器的重新整理率相吻合(60Hz)。如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步重新整理，達到最佳的視覺效果。這意味着，一秒之内進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。

需求大體明确，就是要找到頁面執行過程中的性能瓶頸。而Chrome DevTools的Timeline則正是用來記錄和分析應用在運作時所有的活動情況，它是用來排查應用性能瓶頸的最佳工具。

下圖是Timeline面闆的預覽效果：

Tips:為了避免浏覽器插件對分析過程産生影響，建議在隐身模式下進行分析。

Timeline工具欄介紹

Timeline工具會詳細檢測出在Web應用加載的過程中時間花費情況的概覽，包括下載下傳資源、處理DOM事件、頁面布局渲染、向螢幕繪制元素等。你可以通過分析Timeline得到的事件、架構和實時的記憶體用量，找出應用的性能問題。

在分析頁面前，需要首先開啟錄制功能，記錄頁面的操作和渲染記錄。如上圖，左上角的灰色圓點就是錄制按鈕，點選後會變成紅色，然後在頁面上進行相關操作後再次按下變成灰色完成錄制，這樣就完成了一次對操作及加載渲染的記錄過程，随後Timeline就會開始分析操作過程中的各項性能參數。

Timeline同時提供了兩種檢視模式：“事件模式(Event Mode)”和“幀模式(Frame Mode)”。如上圖箭頭所示。

事件模式：顯示重新渲染的各種事件花費的時間。

幀模式：顯示每一幀的時間花費情況。

事件模式 (Event Mode)

如果我們的一個頁面執行效率不高，我們必須要搞清楚導緻頁面性能低下的原因，到底是javascript執行出了問題，還是頁面渲染出了問題。要了解這裡面的執行細節，我們可以使用“事件模式”來進行分析。首先我們需要錄制一些需要被分析的操作，錄制結束後進入事件模式預覽Timeline。下圖是得到的事件模式的視圖：

在上圖中，不同的顔色表示不同的事件。一種顔色的區塊越長，說明在處理該事件的耗時就越長。單擊某一區塊，可以在下面的Summary概要中看到詳細的事件處理過程及耗時分布。

藍色(Loading)：網絡通信和HTML解析

黃色(Scripting)：JavaScript執行

紫色(Rendering)：樣式計算和布局，即重排

綠色(Painting)：重繪

灰色(other)：其它事件花費的時間

白色(Idle)：空閑時間

在顯示的記錄中，浏覽器也會為在檢測過程中發現的一些可能導緻性能問題的過程進行标注，在

Mode View

視圖區域，可能會出現一些紅色的區塊段，這些紅色的區塊段表明，在對應的時間上執行的事件可能存在性能問題，而在對應的

Main Thread

視圖區域，事件區塊的右上角會出現紅色的小三角，點選目前區塊，在下面的

Summary

概要區域内會給出詳細的警告内容以及腳本可能出現問題的行數，如下圖，浏覽器提示“強制同步布局可能會導緻性能瓶頸”：

此外，在關閉Event Mode後，還可以看到Record Detail視圖，詳細列出一次記錄中各類事件的詳細内容。

Record Detail

視圖區域的左側是事件标題，右側是對應的時間線。點選每一條時間标題可以看到更多資訊，如事件發生在腳本的哪一行等。如果你隻對某一個時間段内的某些操作感興趣，可以通過移動時間軸的始末位置來選擇要浏覽的區域：

幀模式 (Frame Mode)

幀模式從頁面渲染性能的角度提供了資料支撐，一個柱狀“frame”表示渲染過程中的一幀，也就是浏覽器為了渲染單個内容塊而必須要做的工作，包括：執行js，處理事件，修改DOM，更改樣式和布局，繪制頁面等。

如前文所述，我們的目标是保證頁面要有高于每秒60fps(幀)的重新整理頻率，這樣就能保證頁面有高流暢度的渲染。

中在Frame視圖中有兩條貫穿該視圖的橫線，分别辨別出60FPS和30FPS的基準，按照前面提到的16.66ms的計算方式，我們可以了解為分别辨別了16.6ms和33.3ms兩個時間點。下面的一條是60FPS，低于這條線，可以達到每秒60幀；上面的一條是30FPS，低于這條線，可以達到每秒30次渲染。如果色柱都超過30FPS，這個網頁就有性能問題了。

圖中幀柱的高度表示了該幀的總耗時，幀柱中的顔色分别對應該幀中包含的不停類型的事件。每一幀柱的高度越低越好，上圖是藝龍PC首頁

www.elong.com

的幀渲染圖，從圖中可以看出，在進行某些幀的渲染時，幀的渲染頻率低于30FPS/s，第二幀和第三幀就大幅低于30fps(幀柱高度高于30fps标準線)，在實際浏覽器渲染中就有可能出現卡頓。對相關的幀進行分析時，可以點選其中某一幀檢視渲染詳情，也可以選擇某個區域的幾個幀檢視渲染詳情。而要找出可能影響性能的原因，點選目前問題幀，在

Summary

面闆及

Record Detail

視圖中的詳細資訊中進行逐條分析。

你可能注意到了在幀柱上存在灰色區域和空白區域,它們分别代表：

灰色區塊：那些沒有被DevTools感覺到的活動

空白區塊：顯示重新整理周期（display refresh cycles）中的空閑時間段

點選某一個幀柱還可以得到該幀的詳細記錄資料：

Warning: 警告資訊

ScreenShot: 目前選中幀的渲染截屏

Duration: 該記錄及其子記錄的總耗時

FPS: 目前幀的渲染頻率

CPU Time: CPU耗時

Aggregated Time: 合計耗時分布

總結

發現問題是解決問題的第一步，chrome浏覽器的TimeLine工具可以很好地輔助我們分析頁面的性能瓶頸，提供詳細全面的分析資料，為我們進行性能優化提供資料依據。當然，TimeLine中有用的功能還有很多，比如

Memery Mode

, 

Screen Shot

等，使用技巧多種多樣，在這裡主要介紹了如何去記錄一段渲染過程，如何去使用

Event Mode

和

Frame Mode

去檢視并分析得到性能名額，後續如果有新的體會和發現，還會再做記錄~

TimeLine中的事件彙總

Loading事件

事件	描述
Parse HTML	浏覽器執行HTML解析
Finish Loading	網絡請求完畢事件
Receive Data	請求的響應資料到達事件，如果響應資料很大（拆包），可能會多次觸發該事件
Receive Response	響應頭封包到達時觸發
Send Request	發送網絡請求時觸發

Scripting事件

事件	描述
Animation Frame Fired	一個定義好的動畫幀發生并開始回調處理時觸發
Cancel Animation Frame	取消一個動畫幀時觸發
GC Event	垃圾回收時觸發
DOMContentLoaded	當頁面中的DOM内容加載并解析完畢時觸發
Evaluate Script	A script was evaluated.
Event	js事件
Function Call	隻有當浏覽器進入到js引擎中時觸發
Install Timer	建立計時器（調用setTimeout()和setInterval()）時觸發
Request Animation Frame	A requestAnimationFrame() call scheduled a new frame
Remove Timer	當清除一個計時器時觸發
Time	調用console.time()觸發
Time End	調用console.timeEnd()觸發
Timer Fired	定時器激活回調後觸發
XHR Ready State Change	當一個異步請求為就緒狀态後觸發
XHR Load	當一個異步請求完成加載後觸發

Rendering事件

事件	描述
Invalidate layout	當DOM更改導緻頁面布局失效時觸發
Layout	頁面布局計算執行時觸發
Recalculate style	Chrome重新計算元素樣式時觸發
Scroll	内嵌的視窗滾動時觸發

Painting事件

事件	描述
Composite Layers	Chrome的渲染引擎完成圖檔層合并時觸發
Image Decode	一個圖檔資源完成解碼後觸發
Image Resize	一個圖檔被修改尺寸後觸發
Paint	合并後的層被繪制到對應顯示區域後觸發

參考文檔

https://developers.google.com/chrome-developer-tools/docs/timeline

Chrome渲染分析之Timeline工具的使用

使用Chrome DevTools的Timeline分析頁面性能