如何使用Goolge Timeline工具

網上中文的資料版本比較老，找到一個新版本的英文介紹，翻一下，原文：https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=zh

TimeLine 面板總覽

4部分組成：

1.控制面板

包含開始記錄，結束記錄，配置我要捕獲什麼內容組成

2.概述面板

頁面性能的高度總結，詳見下文。

3.火焰圖面板

Cpu棧的可視化描述

4.細節面板

當一個事件被選中，這個面板會顯示有關這個事件的更多信息。若是沒有事件選中，會顯示選中的火焰圖的信息。

 

概述面板

該面板有3部分圖組成：

1.FPS

每秒的火焰。綠色的柱狀越高，fps越高。fps上紅色的區塊預示着長火焰，有多是卡頓產生了。（動畫渲染時間超過了屏幕的刷新時間）

2.cpu

cpu資源。這個面積圖指示了哪一種事件消耗CPU資源多。

3.net

每一個彩色柱表明一種資源。柱子越高，獲取它的時間越長。每一個柱較淡顏色的部分表明了它的等待時間（發送請求到第一個比特下載下來的時間）。深色的部分表明它的處理時間（第一個比特接收

到最後一個比特接收的時間）

柱子的顏色對應以下：

html文件是藍色。

script問件事黃色。

Stylesheets文件是紫色。

media文件是綠色。

其餘文件是灰色。

 

作一個記錄

記錄一個頁面的載入過程，咱們須要打開Timeline面板，打開咱們須要記錄的網頁，刷新網頁，就會自動開始記錄(經測試不能夠，得在timeline面板按F5)

若是要記錄頁面交互，按() 或Ctrl+e開始記錄，頁面操做，而後按紅色按鈕結束記錄。

當記錄結束，工具組會自動縮放到和你最相關的部分給你查看。

記錄小貼士

讓紀錄的時間越短越好：短期讓你更容易分析。

避免沒必要要的動做

禁用瀏覽器緩存

禁用拓展插件

查看記錄細節

當你選中火焰表的一個事件，細節面板會顯示更多有關的細節。

一些選項卡，好比Summary，是全部類型的事件。而其餘的選項卡只顯示某一種事件，查看Timeline event reference得到更多的記錄類型。

紀錄同時捕獲截圖

TimeLine面板能夠在載入頁面的時候捕獲截圖。這就是傳說中的幻燈片（連續截圖）

使用方法就是在控制面板選中Screenshots ，而後在概述面板中鼠標放上去就能看了

 

JavaScript切圖

在控制面板中選中JS Profile選項框，這樣你就能夠在火焰圖中看到每一個Js函數的調用狀況。

 

 

painting切圖

 

當在控制面板中選中Paint，記錄後你能夠單擊一個Paint事件，而後你能夠在細節面板中查看。

 

渲染配置

打開工具主菜單，選擇 More tools > Rendering settings打開配置面板，這個會對於調試paint相關的有幫助。具體以下：

 

搜索記錄

 輸入Ctrl+F (Windows / Linux) 打開，輸入事件名稱查詢，好比 Event