Performance insight概述

Performance insight是chrome Chrome DevTools中的自帶工具（Chrome102 版本發(fā)布），目前還是在chrome DevTool中啟動即可，如下圖所示：我們可以模擬cpu，選擇4x slowdown，就開始模擬4倍低速CPU，同理還可以模擬網(wǎng)絡(luò)應(yīng)對不同網(wǎng)絡(luò)的測試需求。

點擊上圖中的Measure page load 就開始對當(dāng)前的頁面性能進(jìn)行分析了！

Performance insight工具最方便的部分是"insights"面板，它位于面板的最右側(cè)。它以垂直時間線的形式按照事件發(fā)生的順序顯示事件，如渲染阻塞請求、長任務(wù)、布局變化等。點擊這些具體事件將導(dǎo)航到"詳細(xì)信息"選項卡，它給出了關(guān)于它的潛在原因和受它影響的元素等的詳細(xì)信息，在Details中看到影響性能問題的各種因素，遺憾的是修復(fù)方案仍然需要翻墻。我們以jd首頁為例，我們很容易看到Cumulative Layout shift 慢（紅色框，紅色箭頭被認(rèn)定為嚴(yán)重超標(biāo)，需要整改），想要進(jìn)一步進(jìn)行優(yōu)化,點擊該事件就可以查看關(guān)于問題的詳細(xì)描述和具體的優(yōu)化方案。另外在頁面的頂端（綠色框）我們可以方便的看到當(dāng)前頁面FCP，LCP,DCL和TTI這些參數(shù)指標(biāo)，關(guān)于指標(biāo)的含義和參考時間的詳情可以參考文章：

一文帶大家了解前端性能測試所涉及的核心性能指標(biāo)

點擊下圖中的Toggle visual preview 按鈕可以看到頁面具體時間點展示的UI情況，拖動滾動條就可以方便的看到不同時間點UI加載的變化了。

Performance和Performance insight對比

我們也可以通過Chrome DevTools的performance來具體分析頁面性能，但個人認(rèn)為該工具不夠易用，Performance insight相比之前Performance而言優(yōu)勢如下：

• 給開發(fā)者提供更簡潔友好的頁面性能記錄，在主界面從兩個維度來展示整個頁面渲染流程，橫軸為時間軸，縱軸為渲染進(jìn)程的各個階段
• 給開發(fā)者提供了關(guān)鍵頁面性能指標(biāo)的分析，在Insight面板展示頁面的性能指標(biāo)和缺陷，并給出修復(fù)建議
• 對于常規(guī)開發(fā)者了解網(wǎng)頁性能更加輕松，不過這還是一個實驗性的模塊，有很多優(yōu)化的空間。

關(guān)于Performance insight的使用，建議大家親自上手試試，該工具設(shè)計極其易用，相信從事過前端相關(guān)工作的開發(fā)或者測試同學(xué)十分鐘之內(nèi)就可以上手。

我的每一篇文章都希望幫助讀者解決實際工作中遇到的問題！如果文章幫到了您，勞煩點贊、收藏、轉(zhuǎn)發(fā)！您的鼓勵是我不斷更新文章最大的動力！