使用時間軸

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

時間軸面板概述

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

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

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

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

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

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

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

活動模式

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

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

幀模式

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

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

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

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

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

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

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

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

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

關(guān)于綠柱

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

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

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

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

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

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

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

查看幀率統(tǒng)計

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

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

記憶模式

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

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

一種制造記錄

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

錄音：

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

錄制頁面加載

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

錄制頁面加載：

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

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

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

提示錄音制作

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

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

分析時間軸記錄

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

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

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

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

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

DOMContentLoaded和Load事件標(biāo)記

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

定位強迫同步布局

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

時間軸標(biāo)識，當(dāng)你的應(yīng)用程序會導(dǎo)致強制異步布局和標(biāo)記這些記錄有黃色警告圖標(biāo)（?。?。當(dāng)您選擇該記錄，詳細(xì)信息窗格中包含的問題的代碼的堆棧跟蹤。

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

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

關(guān)于嵌套事件

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

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

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

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

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

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

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

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

過濾和搜索記錄

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

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

在時間軸部分放大

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

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

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

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

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

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

保存和載入記錄

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

要保存時間軸記錄：

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

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

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

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

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

錄像中查看CPU時間

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

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

時間軸事件引用

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

常見的事件屬性

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

• 時間匯總

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

• 調(diào)用棧

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

• CPU時間

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

• 詳細(xì)信息

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

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

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

• 自我時間

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

• 二手堆大小

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

加載事件

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

加載事件屬性

• 資源

  所請求的資源的URL。

• 預(yù)習(xí)

  預(yù)覽所請求的資源（僅圖像）。

• 請求方法

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

• 狀態(tài)代碼

  HTTP響應(yīng)代碼

• MIME類型

  MIME類型所請求的資源的。

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

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

腳本事件

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

腳本事件屬性

• 計時器ID

  計時器ID。

• 暫停

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

• 重復(fù)

  布爾值，指定當(dāng)計時器重復(fù)。

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

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

渲染事件

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

渲染事件屬性

• 布局無效

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

• 需要布局節(jié)點

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

• 布局樹的大小

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

• 布局范圍

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

• 影響因素

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

• 樣式無效

  對于重新計算的風(fēng)格記錄，提供導(dǎo)致無效樣式代碼的堆棧跟蹤。

繪畫活動

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

繪畫事件屬性

• 地點

  油漆事件，x和油漆矩形的y坐標(biāo)。

• 尺寸

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