|
文章目錄 1.Performance 2.測試性能操作流程 3.Performance檢測結(jié)果詳解 區(qū)域1：controls【控制欄】 區(qū)域2：overview【網(wǎng)頁性能總覽圖】 區(qū)域3：火焰圖【各項(xiàng)指標(biāo)的堆疊追蹤可視化】 區(qū)域4：統(tǒng)計匯總【以圖表的形式匯總數(shù)據(jù)】 4 其他監(jiān)控性能小工具 4.1 Performance monitor面板：頁面性能的實(shí)時監(jiān)控 4.2 實(shí)時FPS面板：可以實(shí)時展示頁面的FPS指標(biāo) 1.Performance Performance 是 Chrome 開發(fā)者工具中的一個功能，用于記錄網(wǎng)頁從初始化到運(yùn)行時的所有性能指標(biāo)。 可把performance理解為對性能評估領(lǐng)域的一個接口，可以通過performance拿到很多性能上的參數(shù)，通過performance去定位哪里有問題，哪里有問題改哪里。 2.測試性能操作流程 1、在谷歌瀏覽器調(diào)式模式下（F12），切換到 Performance 選項(xiàng)卡。
2.點(diǎn)擊刷新圖標(biāo)，重新加載頁面，出現(xiàn)網(wǎng)頁分析進(jìn)度條。
3.停止后，會出現(xiàn)性能分析圖
3.Performance檢測結(jié)果詳解 1.將整個Performance面板劃分成 4 個區(qū)域
區(qū)域1：controls【控制欄】
1、錄制、停止按鈕可實(shí)時繪制一段時間當(dāng)前頁面時間軸的性能軌跡，時間為秒，停止后生成一張性能分析圖。 2、屏幕快照選項(xiàng)，需要勾選才會出現(xiàn)屏幕快照截圖（一般是默認(rèn)勾選） 3、內(nèi)存復(fù)選框：指標(biāo)對應(yīng)的時間資源狀態(tài)。 這個折線圖只有在點(diǎn)擊 Main 主線程的時候才會有，選擇其他的指標(biāo)時折線圖區(qū)域時空白。
JS Heap：表示 JS 占用的內(nèi)存大小。 Documents：表示文檔數(shù)。 Nodes：表示 Node 節(jié)點(diǎn)數(shù)。 Listeners：表示監(jiān)聽數(shù)。 GPU Memory：表示 GPU 占用數(shù)。 4、表示網(wǎng)速控制，可選3G快、3G慢、或者自定義網(wǎng)速。 5、表示是否對CPU進(jìn)行減速，可選4倍減速、6倍減速，可用來測試CPU在極端環(huán)境下對頁面性能的影響。 區(qū)域2：overview【網(wǎng)頁性能總覽圖】 FPS（每秒幀數(shù)情況）、CPU（CPU占用情況）、NET（網(wǎng)絡(luò)資源情況）、HEAP（JS占用情況）一共四項(xiàng)指標(biāo)。
ps: 在性能報告中，有很多的數(shù)據(jù)。可以通過雙擊，拖動、鼠標(biāo)選取、滾輪滾動等等動作來放大縮小報告范圍，從各種時間段來觀察分析報告。
1、FPS【Frames Per Second】：表示每秒傳輸幀數(shù)，是速度單位，用來分析動畫的一個主要性能指標(biāo)。 幀率能夠達(dá)到 50 ～ 60 FPS 的動畫將會相當(dāng)流暢，讓人倍感舒適； 幀率在 30 ～ 50 FPS 之間的動畫，因各人敏感程度不同，舒適度因人而異； 幀率在 30 FPS 以下的動畫，讓人感覺到明顯的卡頓和不適感； 幀率波動很大的動畫，亦會使人感覺到卡頓。
綠色豎線越高，F(xiàn)PS 越高。 紅色表示長時間幀，可能出現(xiàn)卡頓。 2、CPU 資源：此面積圖指示消耗 CPU 資源的事件類型。 顏色分別為（與數(shù)據(jù)統(tǒng)計中的顏色數(shù)據(jù)表示一致）： 藍(lán)色(Loading)：表示網(wǎng)絡(luò)通信和 HTML 解析時間。 黃色(Scripting)：表示 JavaScript 執(zhí)行時間。 紫色(Rendering)：表示樣式計算和布局（重排）時間。 綠色(Painting)：表示重繪時間。 灰色(other)：表示其它事件花費(fèi)的時間。 白色(Idle)：表示空閑時間。 3、NET：每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。 每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節(jié)下載完成的時間）。 4、HEAP：JavaScrip 執(zhí)行的時間分布。 區(qū)域3：火焰圖【各項(xiàng)指標(biāo)的堆疊追蹤可視化】 1、Network：表示每個服務(wù)器資源的加載情況。 2、Frames：表示每幅幀的運(yùn)行情況。 3、Timings： 圖中虛線與標(biāo)記表示如下： FP（First Paint） 首屏繪制，頁面剛開始渲染的時間。 FCP（First Contentful Paint） 首屏內(nèi)容繪制，首次繪制任何文本，圖像，非空白canvas 或 SVG 的時間點(diǎn)。 LCP（Largest Contentful Paint ） 最大內(nèi)容繪制，頁面上尺寸最大的元素繪制時間 DCL（DOMContentLoaded） 表示 HTML 文檔加載完成事件。當(dāng)初始 HTML 文檔完全加載并解析之后觸發(fā)，無需等待樣式、圖片、子 frame 結(jié)束。作為明顯的對比，load 事件是當(dāng)個頁面完全被加載時才觸發(fā)。 L（Onload） 頁面所有資源加載完成事件。 FMP（First Meaningful Paint） 首屏有意義的內(nèi)容繪制，這個“有意義”沒有權(quán)威的規(guī)定，本質(zhì)上是通過一種算法來猜測某個時間點(diǎn)可能是 FMP。有的理解為是最大元素繪制的時間，即同LCP（Largest Contentful Paint ）。 其中 FP、FCP、FMP 是同一條虛線，三者時間不一致。比如首次渲染過后，有可能出現(xiàn) JS 阻塞，這種情況下 FCP 就會大于 FP。 4、Main：表示主線程，主要負(fù)責(zé)：Javascript 的計算與執(zhí)行；CSS 樣式計算；Layout 布局計算；將頁面元素繪制成位圖（paint）；將位圖給合成線程。 X軸代表時間，每個長條代表著event，長條越長就代表花的時間越多，Y軸代表調(diào)用棧。在棧里，上面的event調(diào)用了下面的event。 如果在性能長條中的右上角出現(xiàn)了紅色的三角形，說明這個事件存在問題，需要特別留意。雙擊這個帶有紅色小三角的的事件。在Summary面板會看到詳細(xì)信息。注意reveal這個鏈接，雙擊它會讓高亮觸發(fā)這個事件的event。如果點(diǎn)擊了angular-1.4.7.min.js:1135這個鏈接，就會跳轉(zhuǎn)到對應(yīng)的代碼處。 區(qū)域4：統(tǒng)計匯總【以圖表的形式匯總數(shù)據(jù)】 記錄頁面后，無需僅依靠Main部分來分析活動。DevTools還提供了三個表格視圖來分析活動。每個視圖您提供有關(guān)活動的不同視點(diǎn)： 1、Summary：表示各指標(biāo)時間占用統(tǒng)計報表； 2、Bottom-Up：表示事件時長排序列表（倒序）=> 可直接查看花費(fèi)最多時間的活動； 3、Call tree：表示事件調(diào)用順序列表=>可直接查看導(dǎo)致最多工作的根活動 ； 4、Event Log：表示事件發(fā)生的順序列表=>記錄期間的活動順序查看活動；
4 其他監(jiān)控性能小工具 4.1 Performance monitor面板：頁面性能的實(shí)時監(jiān)控
4.2 實(shí)時FPS面板：可以實(shí)時展示頁面的FPS指標(biāo) 1. 按下 Control+Shift+P 打開命令菜單 2. 輸入Rendering，點(diǎn)選Show Rendering 3. 在Rendering面板里，激活FPS Meter。FPS實(shí)時面板就出現(xiàn)在頁面的右上方。
原文鏈接：https://blog.csdn.net/weixin_44247866/article/details/128548925 |
|
|
