Chrome開(kāi)發(fā)工具 使用時(shí)間軸

使用時(shí)間軸

時(shí)間軸面板可讓你記錄和分析在你的的應(yīng)用程序運(yùn)行的所有活動(dòng)。它開(kāi)始于你的應(yīng)用程序感知調(diào)查性能問(wèn)題的最佳場(chǎng)所。

時(shí)間軸面板概述

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

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

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

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

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

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

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

活動(dòng)模式

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

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

幀模式

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

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

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

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

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

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

• 不是由DevTools儀表活動(dòng)
• 顯示刷新周期之間的空閑時(shí)間。

下面，在記錄幀同時(shí)顯示配備工具活動(dòng)和空閑時(shí)間。

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

關(guān)于綠柱

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

• 繪制調(diào)用。這是你要畫一個(gè)列表，它來(lái)源于應(yīng)用到元素的CSS。抽獎(jiǎng)的名單和打電話沒(méi)有什么不同，Canvas元素：MOVETO，了lineTo和fillRect。雖然，他們?cè)?a rel="nofollow" rel="external nofollow" target="_blank" target="_blank">Skia的，Chrome的繪畫后端不同的名字，這是一個(gè)類似的概念。

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

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

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

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

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

查看幀率統(tǒng)計(jì)

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

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

記憶模式

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

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

一種制造記錄

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

錄音：

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

錄制頁(yè)面加載

一個(gè)常見(jiàn)的任務(wù)是記錄從最初的網(wǎng)絡(luò)請(qǐng)求的頁(yè)面加載。鍵盤快捷鍵是有用的在這種情況下，因?yàn)樗麄冏屇憧焖賳?dòng)錄音，重新加載頁(yè)面，并停止錄制。

錄制頁(yè)面加載：

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

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

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

提示錄音制作

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

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

分析時(shí)間軸記錄

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

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

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

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

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

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

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

定位強(qiáng)迫同步布局

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

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

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

強(qiáng)制同步布局演示了demonstrationof檢測(cè)和修復(fù)這類性能問(wèn)題。

關(guān)于嵌套事件

在時(shí)間軸記錄的事件有時(shí)在視覺(jué)上嵌套下方另一個(gè)事件。展開(kāi)“父”事件查看其嵌套的“子”事件。有兩個(gè)原因時(shí)間軸事件：

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

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

時(shí)間軸的著色與記錄事件嵌套

時(shí)間軸條的顏色編碼如下：

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

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

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

過(guò)濾和搜索記錄

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

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

在時(shí)間軸部分放大

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

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

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

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

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

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

保存和載入記錄

您可以保存一個(gè)時(shí)間軸記錄作為一個(gè)JSON文件，后來(lái)在時(shí)間軸中打開(kāi)它。

要保存時(shí)間軸記錄：

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

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

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

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

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

錄像中查看CPU時(shí)間

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

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

時(shí)間軸事件引用

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

常見(jiàn)的事件屬性

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

• 時(shí)間匯總

  對(duì)于嵌套的事件事件，采取的每一類事件的時(shí)間。

• 調(diào)用棧

  對(duì)于有孩子的事件事件，采取的每一類事件的時(shí)間。

• CPU時(shí)間

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

• 詳細(xì)信息

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

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

  過(guò)了多長(zhǎng)時(shí)間的情況下與所有的孩子完成的;時(shí)間戳是時(shí)間事件發(fā)生，相對(duì)于記錄時(shí)開(kāi)始。

• 自我時(shí)間

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

• 二手堆大小

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

加載事件

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

加載事件屬性

• 資源

  所請(qǐng)求的資源的URL。

• 預(yù)習(xí)

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

• 請(qǐng)求方法

  用于請(qǐng)求（GET或POST，例如）的HTTP方法。

• 狀態(tài)代碼

  HTTP響應(yīng)代碼

• MIME類型

  MIME類型所請(qǐng)求的資源的。

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

  以字節(jié)為單位請(qǐng)求資源的長(zhǎng)度。

腳本事件

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

腳本事件屬性

• 計(jì)時(shí)器ID

  計(jì)時(shí)器ID。

• 暫停

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

• 重復(fù)

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

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

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

渲染事件

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

渲染事件屬性

• 布局無(wú)效

  對(duì)布局的記錄，將被無(wú)效的代碼的堆棧跟蹤引起的布局。

• 需要布局節(jié)點(diǎn)

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

• 布局樹(shù)的大小

  對(duì)布局的記錄，節(jié)點(diǎn)下的重新布局根的總數(shù)（該節(jié)點(diǎn)鉻啟動(dòng)重新布局）。

• 布局范圍

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

• 影響因素

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

• 樣式無(wú)效

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

繪畫活動(dòng)

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

繪畫事件屬性

• 地點(diǎn)

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

• 尺寸

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