本文要點(diǎn)

詳細(xì)介紹谷歌瀏覽器 performance 選項(xiàng)卡的各個(gè)指標(biāo)卖陵，讓你知道如何查看網(wǎng)頁性能。

谷歌瀏覽器版本為：79.0.3945.117（正式版本） （64 位）侧啼。

性能分析操作流程

1.在谷歌瀏覽器調(diào)式模式下牛柒，切換到 performance 選項(xiàng)卡。點(diǎn)擊刷新圖標(biāo)（或者Ctrl+Shift+E快捷鍵）痊乾。

2.出現(xiàn)如下網(wǎng)頁分析進(jìn)度條皮壁。

3.自動(dòng)停止后，會(huì)出現(xiàn)性能分析圖符喝。
注意點(diǎn)1：需要勾選屏幕快照選項(xiàng)闪彼，才會(huì)出現(xiàn)如下屏幕快照截圖（一般是默認(rèn)勾選）。

注意點(diǎn)2：整個(gè)分析圖出現(xiàn)的時(shí)間軸就是前面步驟中分析進(jìn)度條的時(shí)間协饲，而默認(rèn)出現(xiàn)的區(qū)域時(shí)間軸是首屏加載時(shí)間畏腕。

如圖所示：
（1）以上紅色框出的部分（也是整個(gè)時(shí)間軸）就是前面分析進(jìn)度條的分析時(shí)間。
（2）以上綠色框出的部分是首屏加載時(shí)間茉稠。
（3）首屏加載時(shí)間刻度與選項(xiàng)卡 Summary 的 Total 總時(shí)間一致描馅。
（4）如下圖可通過左右邊界來調(diào)整時(shí)間軸區(qū)域。時(shí)間軸區(qū)域 2 是 時(shí)間軸區(qū)域 1 的放大版而线，便于查看時(shí)間軸區(qū)間的各項(xiàng)指標(biāo)性能情況铭污。

性能分析圖詳解

如下所示恋日，把整張分析圖劃分成 3 個(gè)區(qū)域。

區(qū)域1：網(wǎng)頁性能總覽圖

總覽圖包含 FPS（每秒幀數(shù)情況）嘹狞、CPU（CPU占用情況）岂膳、NET（網(wǎng)絡(luò)資源情況）、HEAP（JS占用情況）一共四項(xiàng)指標(biāo)磅网。

FPS：全稱 Frames Per Second谈截，表示每秒傳輸幀數(shù)，是速度單位涧偷，用來分析動(dòng)畫的一個(gè)主要性能指標(biāo)簸喂。1fps = 0.304 meter/sec(米/秒)。如下圖所示燎潮，綠色豎線越高喻鳄，F(xiàn)PS 越高。 紅色表示長時(shí)間幀确封，可能出現(xiàn)卡頓除呵。

如果能夠達(dá)到 >=60fps(幀)/s 的刷新頻率，就可以避免出現(xiàn)卡頓隅肥。
盡量保證頁面要有高于每秒60fps(幀)的刷新頻率竿奏，這與大多數(shù)顯示器的刷新率相吻合(60Hz)袄简。如果網(wǎng)頁動(dòng)畫能夠做到每秒60幀腥放，就會(huì)跟顯示器同步刷新，達(dá)到最佳的視覺效果绿语。

這意味著秃症，一秒之內(nèi)進(jìn)行 60 次重新渲染，每次重新渲染的時(shí)間不能超過1/60=0.01666s（秒）吕粹；0.01666s*1000=16.66ms（毫秒）种柑。

不同幀的體驗(yàn)：
幀率能夠達(dá)到 50 ～ 60 FPS 的動(dòng)畫將會(huì)相當(dāng)流暢，讓人倍感舒適匹耕；
幀率在 30 ～ 50 FPS 之間的動(dòng)畫聚请，因各人敏感程度不同，舒適度因人而異稳其；
幀率在 30 FPS 以下的動(dòng)畫驶赏，讓人感覺到明顯的卡頓和不適感；
幀率波動(dòng)很大的動(dòng)畫既鞠，亦會(huì)使人感覺到卡頓煤傍。

CPU：CPU 資源。此面積圖指示消耗 CPU 資源的事件類型嘱蛋。
下圖中顏色分別為（與數(shù)據(jù)統(tǒng)計(jì)中的顏色數(shù)據(jù)表示一致）：
藍(lán)色(Loading)：表示網(wǎng)絡(luò)通信和 HTML 解析時(shí)間蚯姆。
黃色(Scripting)：表示 JavaScript 執(zhí)行時(shí)間五续。
紫色(Rendering)：表示樣式計(jì)算和布局（重排）時(shí)間。
綠色(Painting)：表示重繪時(shí)間龄恋。
灰色(other)：表示其它事件花費(fèi)的時(shí)間疙驾。
白色(Idle)：表示空閑時(shí)間。

NET：每條彩色橫杠表示一種資源郭毕。橫杠越長荆萤，檢索資源所需的時(shí)間越長。 每個(gè)橫杠的淺色部分表示等待時(shí)間（從請求資源到第一個(gè)字節(jié)下載完成的時(shí)間）铣卡。

HEAP：JavaScrip 執(zhí)行的時(shí)間分布链韭。

區(qū)域2：各項(xiàng)指標(biāo)的區(qū)塊圖

1.Network：表示每個(gè)服務(wù)器資源的加載情況。

2.Frames：表示每幅幀的運(yùn)行情況煮落。

3.Timings：上圖中有 4 條虛線敞峭，分別表示如下。
（1）DCL（DOMContentLoaded）表示 HTML 文檔加載完成事件蝉仇。當(dāng)初始 HTML 文檔完全加載并解析之后觸發(fā)旋讹，無需等待樣式、圖片轿衔、子 frame 結(jié)束沉迹。作為明顯的對比，load 事件是當(dāng)個(gè)頁面完全被加載時(shí)才觸發(fā)害驹。
（2）FP（First Paint）首屏繪制鞭呕，頁面剛開始渲染的時(shí)間。
（3）FCP（First Contentful Paint）首屏內(nèi)容繪制宛官，首次繪制任何文本葫松，圖像，非空白canvas 或 SVG 的時(shí)間點(diǎn)底洗。
（4）FMP（First Meaningful Paint）首屏有意義的內(nèi)容繪制腋么，這個(gè)“有意義”沒有權(quán)威的規(guī)定，本質(zhì)上是通過一種算法來猜測某個(gè)時(shí)間點(diǎn)可能是 FMP亥揖。有的理解為是最大元素繪制的時(shí)間珊擂，即同LCP（Largest Contentful Paint ）。
其中 FP费变、FCP摧扇、FMP 是同一條虛線，三者時(shí)間不一致胡控。比如首次渲染過后扳剿，有可能出現(xiàn) JS 阻塞，這種情況下 FCP 就會(huì)大于FP昼激。
（5）L（Onload）頁面所有資源加載完成事件庇绽。
（6）LCP（Largest Contentful Paint ）最大內(nèi)容繪制锡搜，頁面上尺寸最大的元素繪制時(shí)間。

4.Main：表示主線程瞧掺。
合成線程主要負(fù)責(zé)：
Javascript 的計(jì)算與執(zhí)行耕餐；
CSS 樣式計(jì)算；
Layout 布局計(jì)算辟狈；
將頁面元素繪制成位圖（paint）肠缔，也就是光柵化（Raster）；
將位圖給合成線程哼转。

5.Raster：光柵化（處理光柵圖明未，即位圖）。

6.GPU：表示 GPU 占用情況壹蔓。

7.Chrome_childIOThread：子線程趟妥。

8.Compositor：合成線程。
合成線程主要負(fù)責(zé)：
將位圖（GraphicsLayer 層）以紋理（texture）的形式上傳給 GPU佣蓉；
計(jì)算頁面的可見部分和即將可見部分（滾動(dòng)）披摄；
CSS 動(dòng)畫處理；
通知 GPU 繪制位圖到屏幕上勇凭。

JS Heap：表示 JS 占用的內(nèi)存大小疚膊。
Documents：表示文檔數(shù)。
Nodes：表示 Node 節(jié)點(diǎn)數(shù)虾标。
Listeners：表示監(jiān)聽數(shù)鹦筹。
GPU Memory：表示 GPU 占用數(shù)饭入。
下面的 4 條折線圖是以上 4 個(gè)指標(biāo)（沒有 GPU 消耗）對應(yīng)的時(shí)間消耗的內(nèi)存大小與節(jié)點(diǎn)數(shù)量伟姐。若將某項(xiàng)指標(biāo)前面的勾選去掉則不會(huì)出現(xiàn)對應(yīng)的折線拯钻。
注意這個(gè)折線圖只有在點(diǎn)擊 Main 主線程的時(shí)候才會(huì)有由蘑，選擇其他的指標(biāo)時(shí)折線圖區(qū)域時(shí)空白察绷。

區(qū)域3：數(shù)據(jù)統(tǒng)計(jì)與匯總

Summary：表示各指標(biāo)時(shí)間占用統(tǒng)計(jì)報(bào)表群扶；
Bottom-Up：表示事件時(shí)長排序列表（倒序）哥遮；
Call tree：表示事件調(diào)用順序列表续镇；
Event Log：表示事件發(fā)生的順序列表美澳；

Loading 事件：

Scripting 事件：

Rendering 事件：

Painting事件：