在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ C++/ 使用時(shí)間軸
谷歌瀏覽器開(kāi)發(fā)工具綜述
在安卓設(shè)備上使用 Chrome 遠(yuǎn)程調(diào)試功能
命令行 API 參考
快捷鍵
通過(guò)工作空間保存更改
展示 Chrome 調(diào)試協(xié)議客戶端實(shí)例
技巧和竅門(mén)
控制臺(tái) API 參考
遠(yuǎn)程調(diào)試協(xié)議
Settings
管理應(yīng)用存儲(chǔ)空間
擴(kuò)展 DevTools
遠(yuǎn)程調(diào)試協(xié)議
使用 CSS 預(yù)處理器
分析 JavaScript 性能
使用控制臺(tái)
DevTools 插件實(shí)例
使用時(shí)間軸
編輯樣式以及 DOM
郵件列表
樹(shù)形提示 (不穩(wěn)定)
時(shí)間軸示例:強(qiáng)制同步布局的診斷
評(píng)估網(wǎng)絡(luò)性能
博客帖子
設(shè)備模式&移動(dòng)仿真
開(kāi)發(fā)工作流程
視頻 Videos
調(diào)試 JavaScript 腳本
JavaScript 內(nèi)存分析
整合 DevTools
對(duì) Chrome 開(kāi)發(fā)工具的貢獻(xiàn)

使用時(shí)間軸

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

時(shí)間軸面板概述

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

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

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

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

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

例如,下面的記錄是被加載到瀏覽器的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í)間軸事件引用。

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

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

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

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

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

活動(dòng)模式

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

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

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

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

幀模式

幀模式提供了洞察應(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ì)每種類(lèi)型的任務(wù)類(lèi)型而采取的百分比。

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

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

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

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

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

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

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

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

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

關(guān)于綠柱

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

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

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

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

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

  • 綠色實(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í)間變化的量。
  • 按類(lèi)別時(shí)間 - 花費(fèi)在每個(gè)類(lèi)型的處理的時(shí)間量,顏色編碼按類(lèi)型。

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

記憶模式

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

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

內(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í)間軸面板底部的圓形錄制按鈕。
    • 按鍵盤(pán)快捷鍵Ctrl + E,或者Cmd的+ E在Mac上。
  3. 錄制按鈕錄制過(guò)程中變成紅色。
  4. 執(zhí)行任何必要的用戶操作記錄所需的行為。
  5. 按現(xiàn)在的紅色錄音按鈕,或重復(fù)的快捷鍵停止錄制。

錄制頁(yè)面加載

一個(gè)常見(jiàn)的任務(wù)是記錄從最初的網(wǎng)絡(luò)請(qǐng)求的頁(yè)面加載。鍵盤(pán)快捷鍵是有用的在這種情況下,因?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. 停車(chē)時(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記錄。

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

請(qǐng)參閱有關(guān)每個(gè)記錄類(lèi)型的詳細(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í)行下列操作之一:

分析時(shí)間軸記錄

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

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

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

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

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

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

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

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

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

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

定位強(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)題的代碼的堆棧跟蹤。

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

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

強(qiáng)制同步布局演示了demonstrationof檢測(cè)和修復(fù)這類(lèi)性能問(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事件的孩子..

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

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

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

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

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

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

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

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

過(guò)濾和搜索記錄

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

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

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

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

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

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

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

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

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

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

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

  • 觸控板的用戶:
    • 刷卡向左或向右兩個(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鍵鍵盤(pán)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)。

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

用戶產(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)記。

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

錄像中查看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)。

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

時(shí)間軸事件引用

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

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

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

  • 時(shí)間匯總

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

  • 調(diào)用棧

    對(duì)于有孩子的事件事件,采取的每一類(lèi)事件的時(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é)列出屬于類(lèi)加載及其屬性的事件

事件 描述
解析HTML Chrome瀏覽器中執(zhí)行它的HTML解析算法
完成加載 完成了網(wǎng)絡(luò)請(qǐng)求
接收數(shù)據(jù) 對(duì)數(shù)據(jù)的請(qǐng)求被接受,將有一個(gè)或多個(gè)接收數(shù)據(jù)的事件
接收響應(yīng) 從請(qǐng)求的初始HTTP響應(yīng)
發(fā)送請(qǐng)求 一個(gè)網(wǎng)絡(luò)請(qǐng)求已發(fā)送。

加載事件屬性

  • 資源

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

  • 預(yù)習(xí)

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

  • 請(qǐng)求方法

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

  • 狀態(tài)代碼

    HTTP響應(yīng)代碼

  • MIME類(lèi)型

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

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

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

腳本事件

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

事件 說(shuō)明
動(dòng)畫(huà)幀射擊 A計(jì)劃的動(dòng)畫(huà)幀解雇,其回調(diào)處理程序調(diào)用
取消動(dòng)畫(huà)幀 A計(jì)劃的動(dòng)畫(huà)幀被取
GC事件 垃圾收集發(fā)生
DOMContentLoaded 在DOMContentLoaded是由瀏覽器發(fā)射。此事件時(shí),所有的頁(yè)面的DOM內(nèi)容已加載和分析解雇。
評(píng)估腳本 腳本進(jìn)行了評(píng)價(jià)
事件 JavaScript事件(“鼠標(biāo)按下”或“鑰匙”,例如)
函數(shù)調(diào)用 頂級(jí)JavaScript函數(shù)調(diào)用作出(僅當(dāng)瀏覽器進(jìn)入的JavaScript引擎出現(xiàn))
安裝計(jì)時(shí)器 定時(shí)器用的setInterval()或創(chuàng)建的setTimeout()
請(qǐng)求幀動(dòng)畫(huà) A requestAnimationFrame()調(diào)用預(yù)定一個(gè)新的框架
刪除定時(shí)器 以前創(chuàng)建的計(jì)時(shí)器清零
時(shí)間 腳本調(diào)用console.time()
時(shí)間結(jié)束 腳本calledconsole.timeEnd()
計(jì)時(shí)器所觸發(fā) 定時(shí)器解雇了原定在使用setInterval()或的setTimeout()
XHR就緒狀態(tài)變化 XMLHttpRequest對(duì)象的就緒狀態(tài)發(fā)生變化
XHR加載 一個(gè)XMLHttpRequest完成載入

腳本事件屬性

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

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

  • 暫停

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

  • 重復(fù)

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

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

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

渲染事件

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

事件 說(shuō)明
布局無(wú)效 頁(yè)面布局無(wú)效由DOM變化
布局 頁(yè)面布局被執(zhí)行死刑
重新計(jì)算樣式 瀏覽器重新計(jì)算元素樣式
滾動(dòng) 嵌套視圖的內(nèi)容進(jìn)行滾動(dòng)。

渲染事件屬性

  • 布局無(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ú)效樣式代碼的堆棧跟蹤。

繪畫(huà)活動(dòng)

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

事件 說(shuō)明
復(fù)合材料層 復(fù)合Chrome的渲染引擎圖像層
圖片解碼 圖像資源進(jìn)行解碼
圖片調(diào)整 圖像是從它的原生尺寸大小
油漆 復(fù)合層涂到該顯示器的一個(gè)區(qū)域。徘徊在一個(gè)油漆紀(jì)錄凸顯已更新顯示的區(qū)域

繪畫(huà)事件屬性

  • 地點(diǎn)

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

  • 尺寸

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