時間軸面板可讓你記錄和分析在你的的應用程序運行的所有活動。它開始于你的應用程序感知調(diào)查性能問題的最佳場所。

時間軸面板概述

時間軸有三個主要部分：頂部的概述部分，記錄視圖和工具欄。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/timeline_ui_annotated.png" alt="timeline_ui_annotated.png" />

• 要啟動或停止錄音，按下錄制按鈕切換（見制作錄音）。
• 按清除記錄按鈕從時間軸清除記錄。
• 膠水異步事件模式，讓你更輕松地關(guān)聯(lián)的異步事件的原因（請參閱關(guān)于嵌套事件）。
• 你可以根據(jù)自己的類型或持續(xù)時間（見過濾和搜索記錄）過濾時間軸顯示的記錄。

記錄過程中，被添加到記錄中的每個事件記錄的“瀑布”演示視圖。記錄被分為四個：加載，腳本，渲染和繪畫。這些記錄被顏色編碼，如下所示：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image01.png" alt="image01.png" />

例如，下面的記錄是被加載到瀏覽器的HTML頁面的。第一個記錄（發(fā)送請求）是用于在網(wǎng)頁瀏覽器的HTTP請求，隨后接收的響應記錄（用于相應的HTTP響應），一些接收數(shù)據(jù)記錄（用于實際頁數(shù)據(jù)），然后一個完成加載記錄。對于記錄時間表及其說明事件的完整列表，請參閱時間軸事件引用。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image06.png" alt="image06.png" />

當你在一個時間軸記錄懸停，將出現(xiàn)一個彈出與有關(guān)關(guān)聯(lián)事件的詳細信息。例如，下面的截圖中顯示的信息與圖像資源相關(guān)聯(lián)的完成加載記錄。時間軸事件的參考說明可用于每個記錄類型的詳細信息。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image12.png" alt="image12.png" />

除了詳細的記錄來看，你可以檢查錄音三種模式之一：

• 活動模式顯示所有記錄的事件按事件類別。
• 幀模式顯示頁面的渲染性能。
• 內(nèi)存模式顯示一段時間內(nèi)你的頁面的內(nèi)存使用情況。

活動模式

該活動模式提供按類型組織的錄制過程中被抓獲的所有事件。一目了然，你可以看到你的應用程序花費最多的時間在什么類型的任務。在此視圖中每個水平條的長度對應于時間的事件發(fā)生來完成。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/events_mode.png" alt="events_mode.png" />

當你從事件視圖（請參閱在時間軸部分拉近）選擇一個時間范圍，該記錄視圖限制為只顯示那些記錄。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/timeline_records.png" alt="timeline_records.png" />

幀模式

幀模式提供了洞察應用程序的渲染性能。 “幀”代表了瀏覽器必須做繪制的內(nèi)容顯示，運行JavaScript的單個幀，處理事件，更新DOM和改變風格，布局和油漆的網(wǎng)頁的工作。我們的目標是為你的應用程序，以每秒60幀（FPS）的運行，其對應于大多數(shù)（但不是全部）視頻顯示器的60Hz的刷新速率。因此，你的應用程序有大約16.6毫秒（1000毫秒/ 60）對每一幀做準備。

整個框架水平線代表觀看了60 FPS和30 FPS幀速率的目標。一幀的高度對應于所花費的渲染幀的時間。顏色填充每一幀顯示的時間對每種類型的任務類型而采取的百分比。

渲染一幀時間顯示在頂部視圖中記錄的。如果通過所顯示的時間懸停，附加信息顯示有關(guān)幀，包括用在每種類型的任務，CPU時間，并計算出的FPS的時間。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/frames_mode.png" alt="frames_mode.png" />

見時間軸演示：診斷和修復同步被迫布局使用框架模式的示范。

關(guān)于透明或淺灰色的框

你可能會注意到一個框架是淺灰色或透明（中空）的區(qū)域。這些區(qū)域分別表示：

• 不是由DevTools儀表活動
• 顯示刷新周期之間的空閑時間。

下面，在記錄幀同時顯示配備工具活動和空閑時間。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/clear-frames.png" alt="clear-frames.png" />

想在酒吧內(nèi)的空白空格更多的細節(jié)？如果你碰到GPU瓶頸，閱讀瀏覽器工程師納特杜卡的解釋，它描述了如何評估。

關(guān)于綠柱

畫的是一個兩步過程，包括：繪制調(diào)用和光柵掃描.

• 繪制調(diào)用。這是你要畫一個列表，它來源于應用到元素的CSS。抽獎的名單和打電話沒有什么不同，Canvas元素：MOVETO，了lineTo和fillRect。雖然，他們在Skia的，Chrome的繪畫后端不同的名字，這是一個類似的概念。

• 光柵化。通過這些繪制調(diào)用步進和填寫實際像素轉(zhuǎn)換成可以被上傳到GPU進行合成緩沖器。

因此，與背景有什么穩(wěn)定的綠色條和空的綠色條之間的區(qū)別？

http://wiki.jikexueyuan.com/project/chrome-devtools/images/hollow-green-bars.png" alt="hollow-green-bars.png" />

• 綠色實酒吧記錄鉻抽獎電話。這發(fā)生在主線程JavaScript的旁邊，計算風格和布局上。合成器線程獲取傳遞的繪制調(diào)用的數(shù)據(jù)結(jié)構(gòu)的分組。

• 空綠色條是光柵化。由合成器催生了一個工作線程來處理這些。

兩者都是油漆，他們只是表示該作業(yè)的不同子任務。如果您有性能問題，你可以看看什么樣的屬性你改變。然后，查看是否有一個合成器，只有這樣才能達到同樣的目的。 CSS觸發(fā)器可以幫助確定一個解決這個。

查看幀率統(tǒng)計

平均幀速率，其標準差為代表的顯示沿著時間軸面板所選幀范圍的底部。如果您在平均幀數(shù)徘徊，似乎與有關(guān)幀選擇的更多信息的彈出：

• 選定范圍 - 該選定的時間范圍，并在選擇的幀的數(shù)目。
• 最小時間 - 所選定鏡架的最低時間，以及在括號中的相應的幀速率。
• 平均時間 - 所選擇的幀的平均時間，并且在括號中的相應的幀速率。
• 最大時間 - 最大時間選定范圍，并在括號中的相應的幀速率。
• 標準偏差 - 所計算的平均時間變化的量。
• 按類別時間 - 花費在每個類型的處理的時間量，顏色編碼按類型。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/average.png" alt="average.png" />

記憶模式

內(nèi)存視圖顯示了隨著時間的推移應用程序使用內(nèi)存的圖形和維護的文檔數(shù)量的計數(shù)器，DO節(jié)點和事件偵聽器在內(nèi)存中保存的（也就是還沒有被垃圾回收）。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image20.png" alt="image20.png" />

內(nèi)存模式不能告訴你到底是什么原因造成內(nèi)存泄漏，但它可以幫助你確定哪些事件在你的應用程序可能會導致內(nèi)存泄漏。然后，您可以使用堆探查，以確定引起泄漏的特定代碼。

一種制造記錄

要進行錄音，開始錄制工作，與應用程序交互，然后停止錄制。它有助于預先知道那種你想要錄制的活動 - 例如，頁面加載，滾動圖像列表的性能，等等，然后堅持該腳本。

錄音：

1. 打開你想要錄制的頁面。
2. 打開時間軸面板，并開始錄制執(zhí)行下列操作之一：
   • 單擊時間軸面板底部的圓形錄制按鈕。
   • 按鍵盤快捷鍵Ctrl + E，或者Cmd的+ E在Mac上。
3. 錄制按鈕錄制過程中變成紅色。
4. 執(zhí)行任何必要的用戶操作記錄所需的行為。
5. 按現(xiàn)在的紅色錄音按鈕，或重復的快捷鍵停止錄制。

錄制頁面加載

一個常見的任務是記錄從最初的網(wǎng)絡(luò)請求的頁面加載。鍵盤快捷鍵是有用的在這種情況下，因為他們讓你快速啟動錄音，重新加載頁面，并停止錄制。

錄制頁面加載：

1. 在新標簽或窗口中打開的任何網(wǎng)頁。
2. 打開時間軸和按CMD + E（Mac）或按Ctrl + E（在Windows / Linux）的開始錄制。
3. 迅速按CMD + R或Ctrl + R重新載入瀏覽器頁面。
4. 停車時，頁面完成加載（外觀為紅事件標記）的記錄。

你的記錄看起來應該像下面這樣。所述firstrecord（發(fā)送請求）是用于在網(wǎng)頁瀏覽器的HTTP請求，隨后對相應的HTTP響應一個接收的響應的記錄，接著是一個或多個接收數(shù)據(jù)的記錄，一個完成載入記錄和解析的HTML記錄。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image006.png" alt="image006.png" />

請參閱有關(guān)每個記錄類型的詳細信息時間軸事件引用。

提示錄音制作

以下是錄音制作一些提示：

• 保持記錄盡可能短。較短一般錄像進行分析更容易。
• 避免不必要的動作。盡量避免那些多余的你想記錄和分析活動的行動（鼠標點擊，網(wǎng)絡(luò)負載等等）。舉例來說，如果你想記錄發(fā)生的事件，你點擊“登錄”按鈕后，不滾動頁面，加載圖像等等。
• 禁用瀏覽器的緩存。當錄制網(wǎng)絡(luò)操作，這是一個好主意，禁止在DevTools設(shè)置面板中的瀏覽器的緩存。
• 禁用擴展。 Chrome擴展可以添加無關(guān)的噪音到應用程序的時間安排錄音。您可以執(zhí)行下列操作之一：
  • 在隱身模式下打開一個瀏覽器窗口
  • 創(chuàng)建用于測試一個新的瀏覽器的用戶配置文件。

分析時間軸記錄

本節(jié)提供了分析時間軸錄音提示。

查看有關(guān)記錄的詳細信息

當您在時間軸中選擇一條記錄，詳細信息窗格顯示有關(guān)該事件的其他信息。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/frames_mode_event_selected.png" alt="frames_mode_event_selected.png" />

某些細節(jié)中存在的所有類型，例如持續(xù)時間和CPU時間的事件，而有些只適用于某些事件類型。有關(guān)那些各種記錄的信息細節(jié)包括，看到時間軸事件引用。

當你選擇一個畫圖記錄，DevTools強調(diào)了與藍色半透明的矩形更新，如下圖所示畫面的區(qū)域。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/paint-hover.png" alt="paint-hover.png" />

DOMContentLoaded和Load事件標記

時間軸標注每個記錄用藍色和紅色的線指示，分別由DOMContentLoaded和負載事件瀏覽器發(fā)出。該DOMContentLoaded事件被觸發(fā)時，所有的頁面的DOM內(nèi)容已加載和分析。加載事件一次燒成的所有文檔的資源（圖像和CSS文件，等等）已經(jīng)被完全裝載。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/event_markers.png" alt="event_markers.png" />

定位強迫同步布局

布局是由鉻計算頁面上的所有元素的位置和大小的過程。通常情況下，Chrome瀏覽器在執(zhí)行從您的應用程序響應CSS或DOM更新布局“懶洋洋地”。這使得Chrome瀏覽器批量的風格和布局的變化，而不是反應到每個需求。但是，應用程序可以強制鉻通過查詢特定布局依賴元件性能如element.offsetWidth的值立即和同步地執(zhí)行布局。這些所謂的“強迫同步布局”可能是一個很大的性能瓶頸，如果經(jīng)常重復或者大DOM樹進行。

時間軸標識，當你的應用程序會導致強制異步布局和標記這些記錄有黃色警告圖標（?。．斈x擇該記錄，詳細信息窗格中包含的問題的代碼的堆棧跟蹤。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/forced_layout.png" alt="forced_layout.png" />

如果記錄中包含了強制的布局的子記錄，父記錄標有一個稍微變暗黃色圖標。展開父記錄，以確定造成強迫布局的子記錄。

強制同步布局演示了demonstrationof檢測和修復這類性能問題。

關(guān)于嵌套事件

在時間軸記錄的事件有時在視覺上嵌套下方另一個事件。展開“父”事件查看其嵌套的“子”事件。有兩個原因時間軸事件：

• 同步事件先前發(fā)生的事件的處理過程中發(fā)生。每個事件在內(nèi)部產(chǎn)生兩個原子事件，一個用于開始，一個用于結(jié)束時，被轉(zhuǎn)換為一個單一的“連續(xù)”事件。這兩個原子事件之間發(fā)生的其他事件成為外部事件的兒童。

下面的截圖顯示嵌套同步事件的一個例子。在這種情況下，瀏覽器被解析一些HTML（在解析HTML事件），當它發(fā)現(xiàn)需要被裝載幾個外部資源。鍍鉻前發(fā)了請求那些已經(jīng)完成了解析，所以發(fā)送請求事件顯示為解析HTML事件的孩子..

http://wiki.jikexueyuan.com/project/chrome-devtools/images/sync_events.png" alt="sync_events.png" />

時間軸的著色與記錄事件嵌套

時間軸條的顏色編碼如下：

• 該軸條的第一個，最黑暗的部分代表多久父事件及其所有的同步孩子了。
• 接下來，稍白色表示該事件及其所有異步孩子們帶的CPU時間。
• 最白的條代表從第一異步事件的開始到最后它的異步兒童的結(jié)束時間。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image16.png" alt="image16.png" />

選擇一個父記錄將顯示在詳細信息窗格中的以下內(nèi)容：

• 文本事件類型總結(jié)和可視化的餅圖。
• 二是JS堆大小在這一點上的記錄，什么這個操作的效果是堆大小。
• 與事件相關(guān)的其他細節(jié)。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/parent_record.png" alt="parent_record.png" />

過濾和搜索記錄

可以篩選根據(jù)其類型示出的記錄（只顯示載荷事件，例如），或僅顯示記錄長于或等于1毫秒或15毫秒。您還可以過濾視圖以顯示匹配的字符串的事件。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/filters.png" alt="filters.png" />

雖然看著所有的事件，你可能需要找一個，但保持一個什么樣的周圍環(huán)境。在這種情況下，你可以找到?jīng)]有過濾。按Ctrl+ F（窗口/ Linux）或Cmd的+ F鍵（Mac），而時間軸具有焦點，以顯示那些包含搜索詞。

在時間軸部分放大

為了讓分析記錄更容易，你可以“放大”時間軸概述，從而降低相應時間尺度的記錄視圖的一部分。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image03.png" alt="image03.png" />

要放大時間軸部分，執(zhí)行下列操作之一：

• 在概覽區(qū)域，拖動時間軸選擇與您的鼠標。
• 調(diào)整標尺區(qū)域的灰色滑塊。

下面是與時間軸選擇工作多一些提示：

• “磨砂”記錄與當前選擇通過拖動兩個滑板條之間的區(qū)域。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image26.png" alt="image26.png" />

• 觸控板的用戶：
  • 刷卡向左或向右兩個手指移動當前時間軸選擇。
  • 刷卡向上或向下用兩個手指擴張或收縮當前時間軸選擇。
• 滾動鼠標滾輪的同時向上或徘徊在一個時間軸選擇向下擴展和收縮選擇。

保存和載入記錄

您可以保存一個時間軸記錄作為一個JSON文件，后來在時間軸中打開它。

要保存時間軸記錄：

1. 右鍵+單擊或Ctrl+單擊（僅限Mac）時間軸內(nèi)，然后選擇保存時間線數(shù)據(jù)...，或者按Ctrl + S鍵鍵盤shorcut。
2. 選擇一個位置來保存文件，然后點擊保存。

要打開現(xiàn)有的時間軸記錄的文件，請執(zhí)行下列操作之一：

1. 用鼠標右鍵單擊或Ctrl+單擊時間軸內(nèi)選擇Load時間軸數(shù)據(jù)...，或按下Ctrl+ O快捷鍵。
2. 找到JSON文件并單擊打開。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image14.png" alt="image14.png" />

用戶產(chǎn)生的事件時間表

應用程序可以添加他們自己的事件到時間線錄音。您可以使用theconsole.timeStamp（）方法來一個原子事件添加到記錄，theconsole.time（）和 console.timeEnd（）methodsto標志著時間代碼執(zhí)行范圍。例如，在下面的記錄console.timeStamp（）已用于顯示“添加結(jié)果”事件。查看時間線中使用控制臺獲取更多信息標記。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/adding-result.png" alt="adding-result.png" />

錄像中查看CPU時間

你會看到上面出現(xiàn)在時間軸記錄淺灰色條，表示當CPU很忙。徘徊在一個CPU吧突出時間軸地區(qū)在此期間，CPU是活動的（如下圖所示）。一個CPU桿的長度通常是它下面所有的（高亮）事件在時間軸的總和。如果兩者不匹配，這可能是由于以下之一：

• 檢查同一線程的頁運行的其他頁面（例如，兩個標簽從同一部位開放，同一個站點做一些在一個setTimeout（）調(diào)用）。
• UN-儀表活動。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/image24.png" alt="image24.png" />

時間軸事件引用

本節(jié)列出并說明了各個類型的類型所舉辦的錄制過程中生成的記錄，和它們的屬性。

常見的事件屬性

某些細節(jié)存在于所有類型的事件，而有些只適用于某些事件類型。本節(jié)列出了常見的不同事件類型的屬性。特定于某些事件類型性能列于對于那些遵循事件類型的引用。

• 時間匯總

  對于嵌套的事件事件，采取的每一類事件的時間。

• 調(diào)用棧

  對于有孩子的事件事件，采取的每一類事件的時間。

• CPU時間

  多少CPU時間記錄的事件發(fā)生。

• 詳細信息

  有關(guān)該事件的其他細節(jié)。

• 持續(xù)時間（在時間戳）

  過了多長時間的情況下與所有的孩子完成的;時間戳是時間事件發(fā)生，相對于記錄時開始。

• 自我時間

  多久的事件發(fā)生，沒有任何的孩子。

• 二手堆大小

  的內(nèi)存量正在使用的應用程序時，被記錄的情況下，和上次采樣中使用的堆的大小的增量。（+/-）變化。

加載事件

本節(jié)列出屬于類加載及其屬性的事件

加載事件屬性

• 資源

  所請求的資源的URL。

• 預習

  預覽所請求的資源（僅圖像）。

• 請求方法

  用于請求（GET或POST，例如）的HTTP方法。

• 狀態(tài)代碼

  HTTP響應代碼

• MIME類型

  MIME類型所請求的資源的。

• 編碼數(shù)據(jù)長度

  以字節(jié)為單位請求資源的長度。

腳本事件

本節(jié)列出了屬于腳本的類別和性質(zhì)的事件。

腳本事件屬性

• 計時器ID

  計時器ID。

• 暫停

  由定時器規(guī)定的超時。

• 重復

  布爾值，指定當計時器重復。

• 函數(shù)調(diào)用

  被調(diào)用的函數(shù)。

渲染事件

本節(jié)列出屬于渲染類別及其屬性的事件。

渲染事件屬性

• 布局無效

  對布局的記錄，將被無效的代碼的堆棧跟蹤引起的布局。

• 需要布局節(jié)點

  對于布局記錄，節(jié)點被標記為需要布局的重新布局開始前的數(shù)量。這些通常是由開發(fā)者的代碼是無效的，這些節(jié)點，再加上一個路徑向上重新布局根。

• 布局樹的大小

  對布局的記錄，節(jié)點下的重新布局根的總數(shù)（該節(jié)點鉻啟動重新布局）。

• 布局范圍

  可能的值是“部分”（重新布局的邊界是DOM的一部分）或“整篇文檔”。

• 影響因素

  為重新計算樣式記載，受風格重新計算元素的數(shù)量。

• 樣式無效

  對于重新計算的風格記錄，提供導致無效樣式代碼的堆棧跟蹤。

繪畫活動

本節(jié)列出屬于繪畫類和它們的屬性的事件。

繪畫事件屬性

• 地點

  油漆事件，x和油漆矩形的y坐標。

• 尺寸

  油漆的事件，該繪區(qū)域的高度和寬度。