chrome使用Timeline作性能分析

使用Timeline作性能分析

---

Timeline面板記錄和分析了web應用運行時的全部活動狀況，這是研究和查找性能問題的最佳途徑。
###Timeline面板概覽 Timeline面板主要有三個部分構成：頂部的概述部分、記錄視圖和工具欄。

• 點擊開始/中止切換按鈕，開始或中止記錄（參考記錄）
• 點擊清理按鈕來從Timeline中清除已有的記錄
• 關聯異步事件模式讓你更容易的關聯異步事件和這些異步事件的調用（參考關於嵌套事件）
• 你能夠根據記錄中的類型、執行時長去過濾Timeline中的記錄（參考過濾和搜索記錄）

在記錄期間，每一個事件以「瀑布」的形式記錄在記錄視圖中。記錄類型有如下四種：加載、腳本執行、渲染和繪製。這些記錄以顏色區分，以下：

以chrome加載一個html頁面的記錄爲例。第一條記錄（發送請求）是來自chrome的獲取頁面的HTTP請求，緊接着是一條接收響應的記錄（獲取響應的HTTP響應）、一些接收數據的記錄（來自頁面的數據），而後是完成加載的記錄。Timeline的一個完整的時間記錄和描述參考Timeline事件參考。

當你把鼠標懸停在Timeline的一條記錄上時，彈出框顯示關聯事件的詳細信息。好比下面的截圖展現加載一張圖片資源的細節。Timeline事件參考解釋了適用於每個記錄類型的詳細狀況。

在記錄試圖除了詳情，你能夠在如下三種模式下檢查記錄：

• 事件模式 以事件分類展現全部事件記錄
• 幀模式 展現頁面的渲染性能
• 內存模式 展現隨着時間的推移內存使用狀況

#####事件模式 事件模式提供以類型組織的記錄期間捕獲的全部事件的概覽。大體能看出你的應用在什麼類型的任務上的主要的時間消耗。這個視圖中的水平條的長度對應於事件完成花費的時間長度。

當你在事件視圖選擇一個時間段（參考在Timeline上放大某個事件段），記錄視圖只展現對應時間段的記錄。

#####幀模式 幀模式提供洞察應用的渲染性能的能力。一「幀」表明瀏覽器渲染一幀要顯示的內容必需要作的工做--運行JavaScript、處理事件、更新DOM、改變樣式佈局和繪製頁面。你的應用的目標是運行在每秒60幀下，對應於大多數（但不是所有）視頻顯示器的60Hz的刷新速率。所以，你的應用程序有大約16.6毫秒（1000毫秒/60）對每一幀作準備。

貫穿幀視圖的水平線呈現60FPS和30FPS的幀速率目標。幀的高度對應於該幀渲染所花費的時間。每幀填充的顏色代表了每種類型的任務所花費的時間百分比。

渲染每幀花費的時間顯示在記錄試圖的頂部。若是你把鼠標懸停在顯示時間上，會顯示幀的附屬信息，包括每種類型的任務的時間、CPU時間、計算FPS的時間。 
參考定位強制同步佈局的示例。

######關於透明或淺灰色的幀 也許你已經注意到有些區域的幀是淺灰色的或者透明的（空的）。這些區域分別代表：

• DevTools不感知的活動
• 刷新週期間的空閒時間

下面的幀中展現了感知的活動和空閒時間。

######關於綠色條 繪圖是一個兩步的過程，包括：繪製調用和柵格化。

• 繪製調用。 這是你想要繪製的東西的列表，它來自於你的元素應用的CSS規則。最後還有一些繪製調用和畫布上的元素不一樣：moveTo, lineTo, and fillRect。儘管在Skia和Chrome繪製後端，他們有着不一樣的名字，但它們是相似的概念。
• 柵格化。The process of stepping through those draw calls and filling out actual pixels into buffers that can be uploaded to the GPU for compositing.

在此背景下，實體綠色條和空綠色條之間有什麼不一樣？

• 實體綠色條的繪製調用被Chrome記錄。這些發生在JavaScript執行、樣式計算和佈局旁的主線程裏。組合線程從繪製調用獲取數據結構組。
• 空綠色條被柵格化。合成器產生一個工做線程處理這些。

二者都被繪製，它們只是表明工做的不一樣子任務。若是你有性能問題你看查找你正在改變什麼屬性。而後，查看是否有一個合成器，只有這樣才能達到一樣的目的。CSS觸發器能夠幫助明確一個解決方案。

######查看幀率統計 被選中的幀範圍的平均幀率和標準誤差顯示在Timeline面板的底部。若是你把鼠標懸停在平均幀速率上，彈窗框會顯示該幀的如下信息：

• Selected range -- 選中的時間段內的幀數
• Minimum Time -- 選中的幀內的最小耗時，括號內是相應的幀速率。
• Average Time -- 選中的幀內的平均耗時，括號內是相應的幀速率。
• Maximum Time -- 選中的幀內的最大耗時，括號內是相應的幀速率。
• Standard Deviation -- 計算平均耗時的數量變化。
• Time by category -- 以顏色區分的處理每種類型事件的耗時。

#####內存模式 內存視圖展現你的應用的隨着時間內存使用狀況，包括文檔數、DOM節點數，以及在內存內的事件監聽（未被GC的）。

內存視圖沒法直接告訴你哪裏引發了內存泄露，但能夠幫助你識別你的應用裏的什麼事件可能致使內存泄露。你能夠接着使用Heap Profiler來識別出致使內存泄露的代碼。

#####記錄 啓動記錄會話，訪問你的應用，再中止記錄，以此來獲取一段記錄。 It helps to know in advance the kind of activity you want to record — for example, page loading, scrolling performance of a list of images, and so forth, and then stick to that script.
爲了更好的記錄：
1.打開你要記錄的頁面。
2.打開Timeline面板，使用下面的按鈕來開始記錄:
點擊Timeline面板的這個圓形按鈕：
使用快捷鍵Ctrl+E, Mac上是Cmd+E。
在記錄期間，記錄按鈕會變成：
3.在頁面上執行你指望記錄的活動。
4.按下頁面上當前是紅色的記錄按鈕或使用快捷鍵來中止記錄。

######記錄頁面加載 一個常見的任務是來自網絡初始化的頁面加載，鍵盤快捷鍵在這種場景下頗有用，讓你能快速的啓動記錄、從新加載頁面、中止記錄。
記錄一個頁面加載：
1.在一個新的tab頁或者窗口中打開web頁面。
2.打開Timeline面板按下Cmd+E(Mac)或者Ctrl+E(Windows/Linux)來開始記錄。
3.快速按下Cmd+R或者Ctrl+R來從新加載頁面。
4.頁面加載完中止記錄。（參考記錄）
你會獲得相似如下的頁面，第一條記錄（發送HTTP請求）是chrome爲獲取頁面的HTTP請求，緊接着是獲取HTTP相應相關的記錄，接着是一條或者多條接收數據的記錄、完成加載的記錄、解析HTML的記錄。

參考Timeline事件參考瞭解詳細的記錄類型。

######更好獲取記錄的小技巧 這是一些更好獲取記錄的小技巧

• 儘量的縮短記錄時間。短的記錄更好分析。
• 避免沒必要要的動做。避免這些和你要記錄和分析不相關的動做（鼠標點擊、網絡請求等）。好比你要記錄點擊「登陸」之後的事件，不要滾動頁面或者加載圖片等。
• 禁用瀏覽器緩存。當記錄網絡操做時，在DevTools設置面板上禁用瀏覽器緩存是個不錯的主意。
• 禁用擴展程序。Chrome的應用擴展會在Timeline裏對你的應用產生一些干擾。你能夠作如下操做：
  以隱身模式打開Chrome窗口 建立一個新的Chrome用戶用來測試

###分析Tineline面板裏的記錄 這部分是分析Timeline面板裏的記錄的一些小貼士。

#####查看記錄詳情 當你選中Timeline面板裏的一條記錄，詳情面板裏會展現該事件相關的詳細信息。

有些細節在全部類型的事件中多呈現，好比持續時間和CPU計算時間。關於每種類型事件的詳細信息，參考Timeline事件參考。

當你選擇一條繪製記錄，DevTools高亮了藍色半透明的矩形更新，以下圖所示畫面的區域。

#####DOMContentLoaded and Load event markers The Timeline annotates each recording with a blue and a red line that indicate, respectively, when the DOMContentLoaded and load events were dispatched by the browser. Timeline面板以藍線和紅線標註瀏覽器發出DOMContentLoaded事件和load事件。DOMContentLoaded事件在頁面的元素加載和解析完被觸發，load事件在文檔的全部資源（圖片、CSS文件等）所有加載好時觸發一次。

#####定位強制同步佈局 佈局是Chrome計算頁面上全部元素的位置、大小的處理過程。一般Chrome在響應中「懶」處理應用中的CSS規則應用或者DOM更新。Chrome在攢一批樣式和佈局修改而不是每當有變化時就去處理。固然應用程序能夠經過查詢特定佈局相關的元素屬性，如element.offsetWidth的值強制Chrome去當即執行佈局。因此這被稱爲「強制同步佈局」，並在頻繁執行或者在一棵大的DOM樹上執行時有可能帶來大的性能瓶頸。

Timeline面板會以一個黃色歎號()標識出應用中的強制同步佈局，選中這條記錄，詳情面板包含響應的調用堆棧。

若是一條記錄中包含的子記錄中有強制佈局，父記錄會被標識稍微暗一點的黃色歎號。展開父記錄能定位到引發強制佈局的子記錄。
參考定位強制同步佈局樣例來參考檢測和修復這類性能問題。

#####關於嵌套事件 Timeline裏的事件有時是嵌套在父事件的下方的。你能夠展開父事件查看嵌套的子事件。有兩個緣由致使Timeline裏有嵌套事件：

• 在處理一個事件時先發生了同步事件。每一個事件內部產生兩個原子事件，一個用來啓動一個用來結束時，被轉換爲一個單一的「連續」事件。任何其餘發生在這兩個原子事件之間的事件成爲外部子事件。

下面的截圖是一個嵌套同步事件的示例。在這個例子中，Chrome正在解析一些HTML時發現須要一些外部資源被加載。這些請求在解析完成前發出來，因此發送請求時間做爲解析HTML的子事件被顯示出來。

#####給Timeline裏的嵌套事件着色 Timeline條按照如下着色：

• 最前面的、顏色最深的條表明事件和它的全部的同步子事件花費的時間。
• 接着稍微淡一點的顏色表明時間和它的全部異步子事件的CPU計算時間。
• 最淡的條表明從第一個異步事件開始到最後一個異步事件結束所花費的時間。

選中一條父記錄將在詳情面板上展現如下內容：

• 以文本和餅圖的形式的時間類型概覽。
• 此時這條記錄使用的JS堆大小，和這個操做對堆大小的影響
• 這個事件響應的其餘詳細信息。

#####過濾和搜索記錄 你能夠按照事件類型去過濾展現哪些記錄（好比只展現加載事件），或只展現大於等於1毫秒或者15毫秒的記錄。你也能夠過濾匹配某個字符串的記錄。

當查看全部事件時，你可能想找某一條記錄，可是它被淹沒在衆多記錄中。這種狀況你能夠不使用過濾功能。按下Ctr+F(Window/Linux)或者Cmd+F(Mac)，此時Timeline中已經對角到包含搜索項的記錄。

#####在Timeline上放大某個事件段 爲了更好的分析記錄，你能夠放大Timeline的某一段概覽，以減小記錄試圖中相應的時間刻度。

放大時間段，能夠按照如下作法：

• 在概覽區域，用鼠標拖動一個時間段。
• 規則區域調整灰色條。

這是更過的關於Timeline時間段的小貼士：

• 經過拖動兩個滑動條來"Scrub"當前時間段內的記錄。

• 觸控板用戶：
  • 向左或向右滑動兩個手指移動當前時間軸選擇。
  • 向上或向下滑動用兩個手指擴大或減少當前時間軸選擇。
• 懸停在一個時間段上向上或向下滾動鼠標滾輪來擴大或減少當前選擇的時間段。

#####保存和加載記錄 你能夠以json文件保存Timeline記錄，後面能夠在Timeline中再打開。

######保存Timeline記錄 1.在Timeline中右鍵或者按住Ctrl再單擊鼠標左鍵(Mac中)，選擇保存Timeline數據菜單或者在鍵盤上使用Ctrl+S。
2.選擇一段時間段來點擊保存。

######打開Timeline記錄 1.右鍵或者按住Ctrl再單擊鼠標左鍵選擇加載要加載的Timeline數據，或者使用Ctrl+O鍵盤快捷鍵。
2.定位到json文件，選中並打開。

#####用戶產生的Timeline事件 應用能夠添加它們的事件到Timeline記錄中。你可使用console.timeStamp()方法添加一個原子事件到記錄中，或者使用console.time()和console.timeEnd()來標記處代碼執行的時間範圍。好比下圖中console.timeStamp()被用來顯示"Adding result"事件。參考在Using the Console中使用Marking the Timeline來獲取更多信息。

#####記錄中的CPU計算時間 你會看到上面出如今Timeline記錄的淺灰色條，表示CPU忙。鼠標懸停在在一個CPU條會高亮處Timeline部分在此期間，CPU是活動的（以下圖所示）。一個CPU條的長度一般是Timeline中的它下面全部的（高亮）事件的總和。若是二者不匹配，這多是因爲如下之一：

• 頁面被檢查期間其餘頁面運行在同一個線程裏（好比兩個標籤頁打開同一個網站，有一邊在setTimeout()裏執行一些代碼）。
• 不感知的活動。

###Timeline事件參考 本節列出並說明了各個類型的記錄類型，和它們的屬性。

#####Common event properties 某些詳情存在於全部類型的事件，而有些只適用於某些事件類型。本節列出了常見的不一樣事件類型的屬性。下面的參考中將列出特定於某些事件類型的屬性。

事件彙總
對於有嵌套事件的事件，每一層目錄所花費的時間。
調用堆棧
對於有子事件的事件，每一層目錄所花費的時間。
CPU計算時間
事件記錄所消耗的CPU計算時間。
詳情
事件的其餘詳情。
持續時間(時間戳)
事件和它的子事件完成所消耗的時間；時間戳是相對於記錄開始事件發生的時間。
自身時間
不包括任何子事件的事件自身消耗的時間。
堆空間使用大小
事件記錄期間應用佔用的內存大小，和取樣期間堆空間使用的變化。

#####Loading事件

事件	描述
解析HTML	Chrome執行HTML解析算法
完成加載	一個網絡請求完成
接收數據	請求的數據被接收，這會是一個或多個的接收數據事件
接收響應	來自請求的最初的HTTP響應
發送請求	一個已發送的網絡請求

#####Loading事件屬性 資源
請求資源的URL。
預覽
請求資源的預覽（僅支持圖片）。
請求方法
請求的HTTP方法(GET或POST等等)。
狀態碼
HTTP響應狀態碼。
MIME類型
請求的資源的MIME類型。
數據大小
請求的資源的字節數。

#####Scripting事件 這一節介紹Scripting類別的事件和它們的屬性。

事件	描述
動畫幀觸發	一個預約的動畫幀被觸發，它的回調處理程序被調用。
取消動畫幀	一個動畫幀被取消。
GC事件	垃圾回收發生。
DOM內容加載	DOM內容加載被瀏覽器觸發。這個事件在全部的頁面DOM元素加載和解析完被觸發。
腳本執行	一段腳本被執行。
事件	一個JavaScript事件("鼠標按下",或按鍵事件等)。
函數調用	調用一個頂層的JavaScript函數（僅出如今當瀏覽器進入JavaScript引擎）。
設置定時器	一個定時器以setInterval()或者setTimeout()建立。
請求動畫幀	調用requestAnimationFrame()函數來調度新的幀。
移除定時器	將以前建立的定時器清除。
開始計時	調用console.time()函數。
計時結束	調用console.timeEnd()函數。
定時任務觸發	一個以setInterval()或者setTimeout()調度的定時器被觸發。
XHR狀態改變	XMLHTTPRequest狀態改變。
XHR加載	XMLHTTPRequest完成加載。

#####Scripting事件屬性

Timer ID
定時器ID.
Timeout
定時器指定的超時時間。
Repeats
定時器是否循環的標識。
Function Call
被調用的函數。

#####Rendering事件 這一節列出渲染時間和它們的屬性。

事件	描述
無效佈局	變化的DOM的佈局無效
佈局	頁面執行佈局
從新計算樣式	Chrome從新計算元素樣式
滾動	嵌套視圖的內容被滾動

#####Rendering事件屬性

Layout invalidated
致使無效佈局的代碼堆棧。
Nodes that need layout
從新佈局前須要佈局的節點數。這一般是由開發者的代碼無效致使的。
Layout tree size
根佈局（Chrome開始佈局的節點）下節點總數。
Layout scope
可能的值是「部分」（從新佈局的邊界是DOM的一部分）或者整個文檔。
Elements affected 從新計算樣式，受影響的元素數量。 recalculation. Styles invalidated 從新計算樣式時，致使無效樣式的代碼堆棧。

#####Painting事件 這一節介紹Painting事件和它們的屬性。

事件	描述
Composite Layers	Chrome的渲染引擎合成圖像層。
Image Decode	圖像解碼。
Image Resize	圖像還原爲原始大小。
Paint	複合層繪製到顯示器的一個區域。鼠標懸停在在一條Paint紀錄頁面上會高亮顯示更新的區域。

#####Painting事件屬性 Location繪製的矩形的x和y座標。Dimensions繪製區域的高度和寬度。