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

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

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

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

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

下圖是Timeline面板的預(yù)覽效果：

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

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

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

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

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

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

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

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

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

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

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

幀模式從頁面渲染性能的角度提供了數(shù)據(jù)支撐，一個柱狀“frame”表示渲染過程中的一幀，也就是瀏覽器為了渲染單個內(nèi)容塊而必須要做的工作，包括：執(zhí)行js，處理事件，修改DOM，更改樣式和布局，繪制頁面等。

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

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

圖中幀柱的高度表示了該幀的總耗時，幀柱中的顏色分別對應(yīng)該幀中包含的不停類型的事件。每一幀柱的高度越低越好，上圖是藝龍PC首頁www.elong.com的幀渲染圖，從圖中可以看出，在進行某些幀的渲染時，幀的渲染頻率低于30FPS/s，第二幀和第三幀就大幅低于30fps(幀柱高度高于30fps標(biāo)準(zhǔn)線)，在實際瀏覽器渲染中就有可能出現(xiàn)卡頓。對相關(guān)的幀進行分析時，可以點擊其中某一幀查看渲染詳情，也可以選擇某個區(qū)域的幾個幀查看渲染詳情。而要找出可能影響性能的原因，點擊當(dāng)前問題幀，在Summary面板及Record Detail視圖中的詳細信息中進行逐條分析。

你可能注意到了在幀柱上存在灰色區(qū)域和空白區(qū)域,它們分別代表：
灰色區(qū)塊：那些沒有被DevTools感知到的活動
空白區(qū)塊：顯示刷新周期（display refresh cycles）中的空閑時間段

點擊某一個幀柱還可以得到該幀的詳細記錄數(shù)據(jù)：

Warning: 警告信息
ScreenShot: 當(dāng)前選中幀的渲染截屏
Duration: 該記錄及其子記錄的總耗時
FPS: 當(dāng)前幀的渲染頻率
CPU Time: CPU耗時
Aggregated Time: 合計耗時分布

發(fā)現(xiàn)問題是解決問題的第一步，chrome瀏覽器的TimeLine工具可以很好地輔助我們分析頁面的性能瓶頸，提供詳細全面的分析數(shù)據(jù)，為我們進行性能優(yōu)化提供數(shù)據(jù)依據(jù)。當(dāng)然，TimeLine中有用的功能還有很多，比如Memery Mode, Screen Shot等，使用技巧多種多樣，在這里主要介紹了如何去記錄一段渲染過程，如何去使用Event Mode和Frame Mode去查看并分析得到性能指標(biāo)，后續(xù)如果有新的體會和發(fā)現(xiàn)，還會再做記錄~

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

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

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