使用 Chrome DevTools 的 Timeline 面板可以記錄和分析您的應(yīng)用在運(yùn)行時(shí)的所有活動(dòng)。這里是開(kāi)始調(diào)查應(yīng)用中可覺(jué)察性能問(wèn)題的最佳位置厂置。
TL;DR
執(zhí)行 Timeline 記錄荧缘，分析頁(yè)面加載或用戶(hù)交互后發(fā)生的每個(gè)事件鸭你。
在 Overview 窗格中查看 FPS爽彤、CPU 和網(wǎng)絡(luò)請(qǐng)求推溃。
點(diǎn)擊火焰圖中的事件以查看與其相關(guān)的詳細(xì)信息昂利。
放大顯示一部分記錄以簡(jiǎn)化分析。
Timeline 面板概覽
Timeline 面板包含以下四個(gè)窗格：
Controls美莫。開(kāi)始記錄页眯，停止記錄和配置記錄期間捕獲的信息。
Overview厢呵。頁(yè)面性能的高級(jí)匯總窝撵。更多內(nèi)容請(qǐng)參見(jiàn)下文。
火焰圖襟铭。CPU 堆疊追蹤的可視化碌奉。
您可以在火焰圖上看到一到三條垂直的虛線。藍(lán)線代表DOMContentLoaded
事件寒砖。綠線代表首次繪制的時(shí)間赐劣。紅線代表load
事件。
Details哩都。選擇事件后魁兼，此窗格會(huì)顯示與該事件有關(guān)的更多信息。未選擇事件時(shí)漠嵌，此窗格會(huì)顯示選定時(shí)間范圍的相關(guān)信息咐汞。
Overview 窗格
Overview 窗格包含以下三個(gè)圖表：
FPS盖呼。每秒幀數(shù)。綠色豎線越高化撕，F(xiàn)PS 越高几晤。FPS 圖表上的紅色塊表示長(zhǎng)時(shí)間幀，很可能會(huì)出現(xiàn)卡頓植阴。
CPU蟹瘾。CPU 資源。此面積圖指示消耗 CPU 資源的事件類(lèi)型掠手。
NET憾朴。每條彩色橫杠表示一種資源。橫杠越長(zhǎng)惨撇，檢索資源所需的時(shí)間越長(zhǎng)伊脓。每個(gè)橫杠的淺色部分表示等待時(shí)間（從請(qǐng)求資源到第一個(gè)字節(jié)下載完成的時(shí)間）。
深色部分表示傳輸時(shí)間（下載第一個(gè)和最后一個(gè)字節(jié)之間的時(shí)間）魁衙。
橫杠按照以下方式進(jìn)行彩色編碼：
HTML 文件為藍(lán)色报腔。
腳本為黃色。
樣式表為紫色剖淀。
媒體文件為綠色纯蛾。
其他資源為灰色。
做記錄
要記錄頁(yè)面加載纵隔，請(qǐng)打開(kāi) Timeline 面板翻诉，打開(kāi)想要記錄的頁(yè)面，然后重新加載頁(yè)面捌刮。Timeline 面板會(huì)自動(dòng)記錄頁(yè)面重新加載碰煌。
要記錄頁(yè)面交互，請(qǐng)打開(kāi) Timeline 面板绅作，然后按 Record 按鈕 ([圖片上傳中芦圾。。俄认。（4）]) 或者鍵入鍵盤(pán)快捷鍵Cmd
+E
(Mac) 或Ctrl
+E
(Windows / Linux)个少，開(kāi)始記錄。記錄時(shí)眯杏，Record 按鈕會(huì)變成紅色夜焦。執(zhí)行頁(yè)面交互，然后按 Record 按鈕或再次鍵入鍵盤(pán)快捷鍵停止記錄岂贩。
完成記錄后茫经，DevTools 會(huì)猜測(cè)哪一部分記錄與您最相關(guān)，并自動(dòng)縮放到那一個(gè)部分。
記錄提示
盡可能保持記錄簡(jiǎn)短科平。簡(jiǎn)短的記錄通常會(huì)讓分析更容易褥紫。
避免不必要的操作。避免與您想要記錄和分析的活動(dòng)無(wú)關(guān)聯(lián)的操作（鼠標(biāo)點(diǎn)擊瞪慧、網(wǎng)絡(luò)加載，等等）部念。例如弃酌，如果您想要記錄點(diǎn)擊 Login 按鈕后發(fā)生的事件，請(qǐng)不要滾動(dòng)頁(yè)面儡炼、加載圖像妓湘，等等。
停用瀏覽器緩存乌询。記錄網(wǎng)絡(luò)操作時(shí)榜贴，最好從 DevTools 的 Settings 面板或 Network conditions 抽屜式導(dǎo)航欄停用瀏覽器的緩存。
停用擴(kuò)展程序妹田。Chrome 擴(kuò)展程序會(huì)給應(yīng)用的 Timeline 記錄增加不相關(guān)的噪聲唬党。以隱身模式打開(kāi) Chrome 窗口或者創(chuàng)建新的 Chrome 用戶(hù)個(gè)人資料，確保您的環(huán)境中沒(méi)有擴(kuò)展程序鬼佣。
查看記錄詳細(xì)信息
在火焰圖中選擇事件時(shí)驶拱，Details 窗格會(huì)顯示與事件相關(guān)的其他信息。
一些標(biāo)簽（如 Summary）適用于所有事件類(lèi)型晶衷。其他標(biāo)簽則僅對(duì)特定事件類(lèi)型可用蓝纲。請(qǐng)參閱 Timeline 事件參考，了解與每個(gè)記錄類(lèi)型相關(guān)的詳細(xì)信息晌纫。
在記錄期間捕捉屏幕截圖
Timeline 面板可以在頁(yè)面加載時(shí)捕捉屏幕截圖税迷。此功能稱(chēng)為幻燈片。
在您開(kāi)始記錄之前锹漱，請(qǐng)?jiān)?Controls 窗格中啟用 Screenshots 復(fù)選框箭养，以便捕捉記錄的屏幕截圖。屏幕截圖顯示在 Overview 窗格下方凌蔬。
將您的鼠標(biāo)懸停在 Screenshots 或 Overview 窗格上可以查看記錄中該點(diǎn)的縮放屏幕截圖露懒。左右移動(dòng)鼠標(biāo)可以模擬記錄的動(dòng)畫(huà)。
分析 JavaScript
開(kāi)始記錄前砂心，請(qǐng)啟用 JS Profile 復(fù)選框懈词，以便在您的時(shí)間線記錄中捕捉 JavaScript 堆棧。啟用 JS 分析器后辩诞，您的火焰圖會(huì)顯示調(diào)用的每個(gè) JavaScript 函數(shù)坎弯。
分析繪制
開(kāi)始記錄前，請(qǐng)啟用 Paint 復(fù)選框，以便獲取有關(guān) Paint 事件的更多數(shù)據(jù)分析抠忘。啟用繪制分析并點(diǎn)擊 Paint 事件后撩炊，新 Paint Profiler 標(biāo)簽會(huì)出現(xiàn)在 Details 窗格中，后者顯示了許多與事件相關(guān)的更精細(xì)信息崎脉。
渲染設(shè)置
打開(kāi)主 DevTools 菜單拧咳，然后選擇More tools > Rendering settings 訪問(wèn)渲染設(shè)置，這些設(shè)置在調(diào)試?yán)L制問(wèn)題時(shí)非常有用囚灼。渲染設(shè)置會(huì)作為一個(gè)標(biāo)簽顯示在 Console 抽屜式導(dǎo)航欄（如果隱藏骆膝，請(qǐng)按esc
顯示抽屜式導(dǎo)航欄）旁邊。
搜索記錄
查看事件時(shí)灶体，您可能希望側(cè)重于一種類(lèi)型的事件阅签。例如，您可能需要查看每個(gè)Parse HTML
事件的詳細(xì)信息蝎抽。
在 Timeline 處于焦點(diǎn)時(shí)政钟，按Cmd
+F
(Mac) 或Ctrl
+F
(Windows / Linux) 以打開(kāi)一個(gè)查找工具欄。鍵入您想要檢查的事件類(lèi)型的名稱(chēng)樟结，如Event
养交。
工具欄僅適用于當(dāng)前選定的時(shí)間范圍。選定時(shí)間范圍以外的任何事件都不會(huì)包含在結(jié)果中狭吼。
利用上下箭頭层坠，您可以按照時(shí)間順序在結(jié)果中移動(dòng)。所以刁笙，第一個(gè)結(jié)果表示選定時(shí)間范圍內(nèi)最早的事件破花，最后一個(gè)結(jié)果表示最后的事件。每次按向上或向下箭頭會(huì)選擇一個(gè)新事件疲吸，因此座每，您可以在 Details 窗格中查看其詳細(xì)信息。按向上和向下箭頭等同于在火焰圖中點(diǎn)擊事件摘悴。
在 Timeline 部分上放大
您可以放大顯示一部分記錄峭梳，以便簡(jiǎn)化分析。使用 Overview 窗格可以放大顯示一部分記錄蹂喻。放大后葱椭，火焰圖會(huì)自動(dòng)縮放以匹配同一部分。
要在 Timeline 部分上放大口四，請(qǐng)執(zhí)行以下操作：
在 Overview 窗格中孵运，使用鼠標(biāo)拖出 Timeline 選擇。
在標(biāo)尺區(qū)域調(diào)整灰色滑塊蔓彩。
選擇部分后治笨，可以使用W
驳概、A
、S
和D
鍵調(diào)整您的選擇旷赖。W
和S
分別代表放大和縮小顺又。A
和D
分別代表左移和右移。
保存和打開(kāi)記錄
您可以在 Overview 或火焰圖窗格中點(diǎn)擊右鍵并選擇相關(guān)選項(xiàng)等孵，保存和打開(kāi)記錄稚照。
