獻(xiàn)給前端研發(fā)同學(xué)的福利!性能診斷神器——Performance insight!
Performance insight概述
Performance insight是chrome Chrome DevTools中的自帶工具(Chrome102 版本發(fā)布),目前還是在chrome DevTool中啟動(dòng)即可,如下圖所示:我們可以模擬cpu,選擇4x slowdown,就開(kāi)始模擬4倍低速CPU,同理還可以模擬網(wǎng)絡(luò)應(yīng)對(duì)不同網(wǎng)絡(luò)的測(cè)試需求。
點(diǎn)擊上圖中的Measure page load 就開(kāi)始對(duì)當(dāng)前的頁(yè)面性能進(jìn)行分析了!
Performance insight工具最方便的部分是"insights"面板,它位于面板的最右側(cè)。它以垂直時(shí)間線(xiàn)的形式按照事件發(fā)生的順序顯示事件,如渲染阻塞請(qǐng)求、長(zhǎng)任務(wù)、布局變化等。點(diǎn)擊這些具體事件將導(dǎo)航到"詳細(xì)信息"選項(xiàng)卡,它給出了關(guān)于它的潛在原因和受它影響的元素等的詳細(xì)信息,在Details中看到影響性能問(wèn)題的各種因素,遺憾的是修復(fù)方案仍然需要翻墻。我們以jd首頁(yè)為例,我們很容易看到Cumulative Layout shift 慢(紅色框,紅色箭頭被認(rèn)定為嚴(yán)重超標(biāo),需要整改),想要進(jìn)一步進(jìn)行優(yōu)化,點(diǎn)擊該事件就可以查看關(guān)于問(wèn)題的詳細(xì)描述和具體的優(yōu)化方案。另外在頁(yè)面的頂端(綠色框)我們可以方便的看到當(dāng)前頁(yè)面FCP,LCP,DCL和TTI這些參數(shù)指標(biāo),關(guān)于指標(biāo)的含義和參考時(shí)間的詳情可以參考文章:
一文帶大家了解前端性能測(cè)試所涉及的核心性能指標(biāo)
點(diǎn)擊下圖中的Toggle visual preview 按鈕可以看到頁(yè)面具體時(shí)間點(diǎn)展示的UI情況,拖動(dòng)滾動(dòng)條就可以方便的看到不同時(shí)間點(diǎn)UI加載的變化了。
Performance和Performance insight對(duì)比
我們也可以通過(guò)Chrome DevTools的performance來(lái)具體分析頁(yè)面性能,但個(gè)人認(rèn)為該工具不夠易用,Performance insight相比之前Performance而言?xún)?yōu)勢(shì)如下:
- 給開(kāi)發(fā)者提供更簡(jiǎn)潔友好的頁(yè)面性能記錄,在主界面從兩個(gè)維度來(lái)展示整個(gè)頁(yè)面渲染流程,橫軸為時(shí)間軸,縱軸為渲染進(jìn)程的各個(gè)階段
- 給開(kāi)發(fā)者提供了關(guān)鍵頁(yè)面性能指標(biāo)的分析,在Insight面板展示頁(yè)面的性能指標(biāo)和缺陷,并給出修復(fù)建議
- 對(duì)于常規(guī)開(kāi)發(fā)者了解網(wǎng)頁(yè)性能更加輕松,不過(guò)這還是一個(gè)實(shí)驗(yàn)性的模塊,有很多優(yōu)化的空間。
關(guān)于Performance insight的使用,建議大家親自上手試試,該工具設(shè)計(jì)極其易用,相信從事過(guò)前端相關(guān)工作的開(kāi)發(fā)或者測(cè)試同學(xué)十分鐘之內(nèi)就可以上手。
我的每一篇文章都希望幫助讀者解決實(shí)際工作中遇到的問(wèn)題!如果文章幫到了您,勞煩點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!您的鼓勵(lì)是我不斷更新文章最大的動(dòng)力!