摘要：如果網頁動畫能夠做到每秒幀，就會跟顯示器同步刷新，達到最佳的視覺效果。下面的一條是，低于這條線，可以達到每秒幀上面的一條是，低于這條線，可以達到每秒次渲染。圖中幀柱的高度表示了該幀的總耗時，幀柱中的顏色分別對應該幀中包含的不停類型的事件。

原文地址：http://horve.github.io/2015/10/26/timeli...

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

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

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

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

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

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

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

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

事件模式：顯示重新渲染的各種事件花費的時間。
幀模式：顯示每一幀的時間花費情況。

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

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

藍色(Loading)：網絡通信和HTML解析
黃色(Scripting)：JavaScript執行
紫色(Rendering)：樣式計算和布局，即重排
綠色(Painting)：重繪
灰色(other)：其它事件花費的時間
白色(Idle)：空閑時間

在顯示的記錄中，瀏覽器也會為在檢測過程中發現的一些可能導致性能問題的過程進行標注，在Mode View視圖區域，可能會出現一些紅色的區塊段，這些紅色的區塊段表明，在對應的時間上執行的事件可能存在性能問題，而在對應的Main Thread視圖區域，事件區塊的右上角會出現紅色的小三角，點擊當前區塊，在下面的Summary概要區域內會給出詳細的警告內容以及腳本可能出現問題的行數，如下圖，瀏覽器提示“強制同步布局可能會導致性能瓶頸”：

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

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

幀模式從頁面渲染性能的角度提供了數據支撐，一個柱狀“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去查看并分析得到性能指標，后續如果有新的體會和發現，還會再做記錄~

https://developers.google.com/chrome-dev...

http://www.w3cfuns.com/article-1248-1.ht...

http://www.oschina.net/translate/perform...