開發人員工具「時間軸」面板一直是效能最佳化過程中的最佳起點。應用程式活動會集中瀏覽,幫助您分析在載入、編寫指令碼、轉譯和繪製上花費的時間。我們最近升級了時間軸,納入更多檢測結果,讓您可以更深入瞭解應用程式的成效。
我們新增了下列功能:
- 整合式 JavaScript 分析器。(包括火焰圖!)
- Frameviewer (頁框檢視器) 協助您視覺化合成圖層。
- 油漆分析器,提供詳細分析瀏覽器繪畫活動。
請注意,使用本文所述的「繪製」擷取選項會產生一些效能負擔,因此只有在需要時才開啟這些選項。
整合式 JavaScript 分析器
如果您曾經在「設定檔」面板中瀏覽,應該已經熟悉 JavaScript CPU 分析器。這項工具會測量 JavaScript 函式所花費的執行時間。使用「火焰圖」檢視 JavaScript 設定檔,您就可以透過視覺化的方式呈現隨著時間的 JavaScript 處理過程。
現在,你可以在「Timeline」面板中查看 JavaScript 執行作業的精細詳細資料。選取「JS Profiler」擷取選項後,您就可以在時間軸中查看 JavaScript 呼叫堆疊,以及其他瀏覽器事件。在時間軸中加入這項功能,可簡化偵錯工作流程。不僅如此,您還可以在運作時查看 JavaScript,找出程式碼中影響網頁載入時間和轉譯的部分。
除了 JavaScript 分析器外,我們也將「火焰圖」檢視整合至「Timeline」面板。您現在可以查看應用程式的傳統事件瀑布或火焰圖。您可以透過「火焰圖」圖示在這兩種檢視之間切換。
![火焰圖示。](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/flame-icon-88552c36931b3.png?authuser=19&hl=zh-tw)
![使用 JS Profiler 擷取選項和「Flame Chart」檢視畫面調查時間軸中的呼叫堆疊。](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/using-js-profiler-captur-f24510c4ffb96.png?authuser=19&hl=zh-tw)
影格檢視器
圖層合成的藝術是瀏覽器的另一個層面,也是開發人員最不為人知的功能。請謹慎使用並謹慎使用,避免成本高昂的重建工作,進而大幅提升效能。但預測瀏覽器如何製作內容,通常並不容易。您可以使用時間軸全新的「繪製」擷取選項,以視覺化方式呈現錄製每個影格中的合成圖層。
選取「Main Thread」上方的灰色頁框列時,「Layers」面板會顯示組成應用程式圖層的視覺模型。
您可以縮放、旋轉及拖曳圖層模型,以探索其中的內容。將滑鼠遊標懸停在圖層上,即可查看圖層在頁面中的目前位置。在圖層上按一下滑鼠右鍵,即可跳至「元素」面板中的對應節點。這些地圖項目會顯示已升級為圖層的內容。如果您選取圖層,您還可在「Compositing Reasons」列中查看升級的原因。
![從 Codrops 的散佈圓點圓點圖片庫檢查圖層,瞭解瀏覽器使用合成的原因。](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/inspecting-layer-codrop-47e24b33f4ad3.png?authuser=19&hl=zh-tw)
繪製分析器
最後,我們加入了繪圖分析器,協助辨識因昂貴顏料造成的卡頓。這項功能可進一步提供 Chrome 在油漆活動期間工作的詳細資料,豐富時間軸的內容。
一開始,現在可以更輕鬆地辨別與個別顏料事件對應的影像內容。當您在時間軸中選取綠色繪製事件時,「Details」窗格會顯示實際繪製像素的預覽畫面。
![預覽瀏覽器使用「塗料擷取」選項繪製的像素。](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/previewing-pixels-the-br-42df0e50055d.png?authuser=19&hl=zh-tw)
如要瞭解詳情,請切換至「Paint Profiler」窗格。這個分析器會顯示瀏覽器針對所選顏料執行的確切繪圖指令。為協助您將這些原生指令與應用程式中的實際內容連結,您可以在「繪製*」呼叫上按一下滑鼠右鍵,然後直接跳到「Elements」面板中的對應節點。
![使用 Paint Profiler 連結原生瀏覽器繪製呼叫對 DOM 元素的影響。](https://developer.chrome.com/static/blog/devtools-timeline-now-providing-the-full-story/image/relating-native-browser-d-33ad9225c5d3b.png?authuser=19&hl=zh-tw)
窗格頂端的簡短時間軸可讓您播放繪畫過程,讓您瞭解瀏覽器執行哪些作業的成本較高。繪圖作業會以不同顏色標示如下:粉紅色 (形狀)、藍色 (點陣圖)、綠色 (文字) 和紫色 (其他)。長條高度代表通話時間長度,因此查看長長條有助於釐清特定顏料成本的高成本。
個人資料和獲利!
在效能最佳化方面,瀏覽器的知識往往相當強大。這些時間軸更新可讓你清楚瞭解程式碼,進而釐清程式碼與 Chrome 轉譯程序之間的關係。在時間軸中試用這些新選項,看看 Chrome 開發人員工具如何改善卡頓搜尋工作流程!