Performance insight概述

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

點擊上圖中的Measure page load 就開始對當前的頁面性能進行分析了！

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

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

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

Performance和Performance insight對比

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

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

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

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