一、概括　　

Timeline面板包括以下四個部分：

控制面板。開始記錄、停止記錄、配置捕獲信息；

概況。頁面性能的整體概況；

flame chart。直觀展示cpu堆的情況。你能夠看到三條虛線，藍色的代表DOM生成完畢，綠色的代表第一次繪制，紅色代表加載完畢；

細節。當一個事件被選中，這塊區域顯示事件的更全面信息。當沒有事件被選中，展示關于選中的事件幀的信息。

?

二、概況面板

　　概況面板包含三個圖：

FPS。每秒的幀數量。綠色塊越高，FPS越高。在綠色塊上面的紅色塊表明每幀的事件過長，可能出現卡頓；

CPU。每種事件的CPU占用。

NET。每個顏色的塊代表一種資源，塊長度越長，獲取此資源的時間也越長。較淺的區域表示等待時間（從發送請求到接收到第一個byte的時間）。深色區域代表傳輸事件。HTML 文件是藍色的，Scripts是黃色的，?* 樣式表是紫色的，媒體文件是綠色的，混雜資源是灰色。

?

三、記錄

　　記錄一個頁面加載，打開Timeline面板，打開你想記錄的頁面，然后刷新頁面，timeline面板將自動記錄頁面重載。

　　記錄頁面交互，打開Timeline面板，點擊RECORD按鈕，RECORD按鈕在記錄時變成紅色，執行頁面交互，然后停止記錄。

　　當記錄完成后，DevTools會自動猜測哪部分與你相關，自動放大此本分。

記錄小貼士：

記錄時間越短越好

避免不必要操作

禁止瀏覽器緩存

禁止插件擴展

?

四、記錄細節

　　當你在flame chart中選擇了一個事件，細節面板會顯示該事件的信息。

?

五、捕獲屏幕截圖

　　Timeline面板可以在頁面加載時捕獲屏幕截圖，這個特點叫做Filmstrip。

?

原文地址：https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool

轉載于:https://www.cnblogs.com/shytong/p/5409154.html

總結

以上是生活随笔為你收集整理的chrome中Timeline的使用（译）的全部內容，希望文章能夠幫你解決所遇到的問題。

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