概述

這個工具真的很強大，Timeline工具欄提供了對于在裝載你的Web應用的過程中，時間花費情況的概覽，這些應用包括處理DOM事件, 頁面布局渲染或者向屏幕繪制元素。Timeline可以通過事件，框架，和實時內存用量3個方面的數據來監測網頁，通過這些數據，我們可以方便的找出頁面中存在問題的地方。

Timeline面板

打開chrome開發者工具，切換到Timeline選項卡，界面如下：

功能很多，非常復雜是不是，對應E問不好的同學，真的是無從下手，幸好有翻譯工具，下面我們一步一步的揭開這個工具的神秘面紗。

強烈建議在瀏覽器隱身模式下使用這個工具，并且禁用一切無關的插件，因為這些插件會影響測試的結果。

工具默認是不開啟記錄的，如果要分析頁面，請點擊圓形的記錄按鈕，按鈕變紅后就可以開始記錄頁面的各個事件了，這個時候可以在頁面上做各種操作，Timeline工具會詳細的記錄下各類事件。建議不要記錄太久，太多會增加分析的難度。

顏色的屬性

Timeline工具里面使用是4種顏色來表示不同類別的事件：

藍色：加載；

黃色：腳本；

紫色：渲染；

綠色：繪制

過濾

過濾面板可以對不同類型的事件和花費時間進行過濾，非常好用：

事件模式

在這個模式中，Summary視圖(在Timeline的頂部)顯示了一些水平的柵欄，分別代表頁面中的網絡和HTML解析(藍色)，JavaScript(黃色)，渲染(紫色)以及繪制(綠色)事件。重繪是瀏覽器事件，是為響應諸如窗口大小改變或者滾動之類的視覺變化而調用的。

我們可以在最上面灰色的時間節點哪里拖動來選擇查看的記錄范圍，如下圖：

在DETAILS面板中可以查看該記錄范圍內各類型事件的時間開銷：

other表示其它事件花費的時間，Idle表示空閑時間?，也可以在DETAILS面板中查看單個記錄的時間開銷，如下：

名詞解釋：

send requestevaluate scriptparse htmlrecalculate stylelayoutpaint setuppaintcomposite layerstimer firedfunction callreceive datareceive responsefinish loadingGC eventpevaluate scriptrasterize

發送請求	評估腳本	解析html	重新計算顯示樣式
計算布局	繪制設置【準備繪制】	繪制	組合層
觸發定時器	函數調用	接收數據	接收響應
結束加載	瀏覽器垃圾回收	評估腳本	光柵化

幀模式

幀模式能讓我們深入的了解頁面的渲染性能，“幀”表示瀏覽器要呈現的內容顯示到單個幀所必須做的工作，如運行 JavaScript、 處理事件、 更新 DOM 和更改的樣式、 布局和繪制。

目前大多數的顯示器的刷新頻率是60Hz，那么我們頁面的繪制頻率能達到60幀每秒是最好的，因為軟件幀和硬件的刷新頻率一致的話，頁面能給人非常流暢的感覺，否則就會感覺到很卡，這樣我們大概有16.6ms（1000/60）來完成每一幀的呈現，這就是很多人說的?“16.6ms”優化?。

灰色的區域有點難理解，你可以理解是瀏覽器內部c++的一些工作，這部分可能和前端的js以及渲染沒什么關系。【陳子舜】

選擇一個幀范圍可以查看這個范圍內幀的一些數據，如下：

內存模式

內存視圖會通過一個圖表顯示您的頁面隨著時間的推移所使用的內存，你可以查看每個時間段的內存使用量，并找出性能問題。

結束語

PS：本文來自huihuixiao發表在部門博客的內容，覺得非常有價值故轉載出來，在此感謝huihui的辛苦付出！

通過Timeline來觀察頁面的渲染變化，有利于分析頁面的性能瓶頸。timeline是個非常不錯的工具，下一次將講解”Rendering”的用法，通過timeline + Rendering 基本能分析出頁面的渲染性能。這在移動端非常有用。

參考文檔

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

http://www.qingdou.me/3719.html

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

轉載于:https://www.cnblogs.com/dasn/articles/4015755.html

總結

以上是生活随笔為你收集整理的转:Chrome渲染分析之Timeline工具的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。