Chrome開發者工具詳解(3)-Timeline面板

Chrome開發者工具詳解(3)-Timeline面板

注： 這一篇主要講解面板Timeline，參考了Google的相關文檔，主要用於公司內部技術分享。。

注： 這一篇主要講解面板Timeline，參考了Google的相關文檔，主要用於公司內部技術分享。。

Timeline面板

Timeline面板是整個面板裏面最複雜的一個面板，涉及的東西比較多。能夠利用這個面板來記錄和分析網頁運行過程當中的全部活動行爲信息。
你能夠充分利用這個面板來分析你的網頁的程序性能問題。

概述

下圖是從Google官方網站中介紹Timeline面板的圖貼到這裏，該面板主要包括4大塊窗格(Pane)：

1. Controls 錄製開關和控制錄製過程當中須要記錄哪些信息。
2. Overview 網頁性能的概要信息。
3. Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)。在圖表裏面有1到3條虛豎線。
4. Details 當選擇一個指定的事件後，會顯示這個事件的更多信息；當沒有選擇事件時，會顯示指定的時間幀信息。

Flame Chart裏面的虛豎線含義：藍色標記DOMContentLoaded事件；綠色標記第一次的繪製時間點；紅色表明load事件。

其中第2塊Overview顯示了網頁性能相關的概要信息，能夠經過鼠標或者區域邊界上的灰色滑塊來拖出一個指定區域範圍，Flame Chart會跟着局部放大顯示指定區域內的詳情信息。

能夠經過鍵盤上的W,S來放大和縮小指定區域，經過A,D來向左或向右移動指定區域。

從Google把圖貼到這裏，這個窗格包含了三個圖表：

1. FPS 每秒幀數(Frames Per Second)。綠色柱狀條越高，則每秒幀數越高。在FPS圖表上方的紅色塊是標記一個長幀。
2. CPU 標記CPU資源的使用狀況，這裏的面積圖標記着消耗CPU資源的各種事件。
3. NET 各類顏色的柱狀條分別顯示一種資源。柱狀條越長，表明獲取這個資源的時間越長。

CPU面積圖中各顏色的含義：藍色表明HTML文件；黃色表明腳本文件；紫色表明樣式文件；綠色表明媒體文件；灰色表明其它雜項文件。

NET圖表柱狀條兩種顏色的含義：較亮的部分表示等待時間（當資源被請求時，直到第一個字節被下載的時間)；較暗的部分表示傳輸時間(在第一個和最後一個字節被下載之間的時間)。

網頁錄製詳情

支持兩種網頁錄製操做：①錄製網頁加載，②錄製網頁交互。爲了便於分析，錄製的時間不宜太長、還要避免沒必要要的交互操做、並禁用瀏覽器的緩存和插件。

當錄製完成後，在Flame Chart(火焰圖)中點擊左側三角能夠展開詳情，點擊其中的事件或者空白處，能夠在Details裏面查看該事件或者總的概要信息。這裏麪包含的信息量很大，限於篇幅緣由，下次有機會再做深刻介紹，或者直接到Google上查看Timeline Event Reference這個參考文檔。

錄製中進行JS分析

在錄製以前點擊Controls中的JS Profile複選框，能夠在時間軸中捕獲JavaScript的堆棧信息(會產生必定的性能消耗)，而且在Flame Chart(火焰圖)中會顯示全部被調用的JavaScript函數信息。

錄製中捕獲截屏

在錄製以前點擊Controls中的Screenshots複選框，能夠在錄製過程當中捕獲截屏，鼠標在Overview上從左向右移動則能夠看到錄製的動畫。

繪製解析

在錄製以前點擊Controls中的Paint複選框，能夠獲取繪製事件的更多細節信息（注意這會產生不少的性能消耗）。若是要深刻了解網頁渲染方面的信息，能夠點擊DevTools右上角的菜單，在More tools裏面選中Rendering settings，這裏麪包含了以下設置項：

• Paint Flashing 高亮顯示網頁中須要被重繪的部分。
• Layer Borders 顯示Layer邊界。
• FPS Meter 每一秒的幀細節，幀速率的分佈信息和GPU的內存使用狀況。
• Scrolling Performance Issues 分析鼠標滾動時的性能問題，會顯示使屏幕滾動變慢的區域。
• Emulate CSS Media 仿真CSS媒體類型，查看不一樣的設備上CSS樣式效果，可能的媒體類型選項有print、screen。

把上面的全部設置項勾選上，網頁的顯示效果以下：

查詢指定事件

你能夠經過在DevTools上按Cmd+F(Mac)調出查詢框，來查看指定時間區域範圍內的指定類型的事件，點擊Cmd+G(Mac)或者Cmd+Shift+G(Mac)能夠按事件發生的順序來查詢。

圖中查詢到了4個紅色標記着的Parse HTML事件，點擊Cmd+G焦點會在這4個事件移動。

運行時性能分析

上面大體介紹了Timeline面板上的各個功能菜單，那麼如何去利用該面板去分析和優化網頁程序的運行性能呢，因爲篇幅限制，就不在這邊展開討論，感興趣的讀者直接到Google開發者文檔上查看，Google開發者文檔有最權威最新的信息。

參考文檔

• Analyze Runtime Performance
• Diagnose Forced Synchronous Layouts

我的博客

個人我的博客