Chrome Timeline 圖解

連接：Performance Analysis Reference

工具欄介紹

: 點擊開始錄製

: 刷新頁面，從新錄製，會自動中止

: 刪除

: 查看內存使用狀況

: 強制進行垃圾回收

: 設置，點擊該按鈕，能夠設置Disabled JavaScript samples等相關功能

: 設置網絡

: 調節CPU性能（主要能夠用來仿手機環境等）

其他在下面章節中會介紹到

Screenshot

開啓的狀況下，Frame標籤下會有屏幕當前屏幕的截圖

關閉的狀況下，則無

Disabale Javascript samples

不勾選的狀況下，main下面會顯示調用的每一個 JavaScript 函數

該圖顯示了DomContentLoaded事件觸發後，調用了Function Call; Function Call 往下又調用了e()...，依次類推（Timeline事件參考）

勾選的狀況下，沒有詳細的函數調用狀況

Enable advanced paint instrmentation(slow)

查看渲染狀況；

概覽欄

： 每秒幀數；綠色豎線越高，FPS越高。FPS圖表上的紅色表示長時間幀，極可能會出現卡頓。

例以下圖，咱們能夠移動概況欄，將時間軸集中到紅色塊附件，發現Layout等右上角有紅色小塊，點擊這些事件，Summary下會顯示對應的事件以及對應的代碼位置。

： CPU資源，此面積表示消耗CPU資源的事件類型。

： 每條彩色橫槓表示一種資源；橫槓越長，檢索資源所需的時間越長。

每一個橫槓的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）

深色部分表示傳輸時間（下載第一個和最後一個字節之間的時間）

查看Main塊下的事件

選中對應的塊，能夠經過下面Summary、Call Tree、Bottom-up、Event Log查看詳情

• Call Tree查看函數調用
  
  
  

  • slef time：當前函數調用花費的時間

  • total time：表示其與其子函數總花費的時間

  • filter：篩選

  • grouping：根據條件對活動表進行排序。

  • Show Heaviest Stack: 顯示所選活動哪些子函數執行時間最長

• Bottom-up 查看哪些函數調用時間最長
  
  
  

  • slef time 當前函數調用花費的時間
  • total time 表示其與其子函數總花費的時間

• Event Log 按錄製時的順序查看事件
  
  
  

  • Duration： 按花費時間進行篩選

查看其它

1. GPU
2. Raster(光柵)
3. interactions： 查看用戶交互
4. network

• 色塊介紹
  • HTML 文件爲藍色。
  • JS爲黃色。
  • CSS爲紫色。
  • Images爲綠色。
  • 其餘資源爲灰色。
• 優先級
  左上角藍色越深，優先級越高

• 與network欄的對應關係
  • 左邊的線：request send前
  • 淺色塊： request send 和tftb
  • 深色塊： content download
  • 右邊線： 等待主線程時間，不在Timing中顯示

5. 查看特定塊消耗的時間 按住shift，單擊鼠標進行選擇塊，查看該段消耗的時間

其餘 —— 分析繪製

1. 按esc，click,選擇rendering tab

2. 打開FPS meter,實時顯示當前頁面的FPS，幀數越高，動畫顯示的越流暢。

3. Paint flashing, 實時顯示瀏覽器繪製，重繪時，會顯示綠色的邊框

4. Layer Borders顯示層的組合邊界

   • 黃色邊框：用於顯示頁面上的layer
   • 藍色柵格線：表示的是分塊，這些分塊能夠看做是比層更低一級的單位
   • 其餘顏色的邊框線，好比圖片若是單獨有個layer的話，邊框線是藍色的

5. Scrolling Performance Issues分析鼠標滾動時的性能問題，會顯示使屏幕滾動變慢的區域。

具體能夠查看連接Chrome渲染分析之Rendering工具使用

移動時間軸

1. 鼠標移動
2. 使用A、D、W、S，進行時間軸的調節

保存/導出

右鍵點擊Save profile便可下載當前的性能分析視圖

點擊Load profile便可載入上次的視圖，進行分析

注意

• 儘量保持記錄簡短。簡短的記錄一般會讓分析更容易。
• 避免沒必要要的操做。避免與您想要記錄和分析的活動無關聯的操做（鼠標點擊、網絡加載，等等）。例如，若是您想要記錄點擊 Login 按鈕後發生的事件，請不要滾動頁面、加載圖像，等等。
• 停用瀏覽器緩存。記錄網絡操做時，最好從 DevTools 的 Settings 面板或 Network conditions 抽屜式導航欄停用瀏覽器的緩存。
• 停用擴展程序。Chrome 擴展程序會給應用的 Timeline 記錄增長不相關的噪聲。 以隱身模式打開 Chrome 窗口或者建立新的 Chrome 用戶我的資料，確保您的環境中沒有擴展程序。

備註：

• Timeline 事件參考
• Optimize Website Speed With Chrome DevTools
• Chrome渲染分析之Rendering工具使用