(給前端大全加星標(biāo),提升前端技能)
作者: 前端Q 公號(hào) / LuckyWinty (本文來(lái)自作者投稿)
我們經(jīng)常使用 Chrome Dev Tools 來(lái)開(kāi)發(fā)調(diào)試,但是很少知道怎么利用它來(lái)分析頁(yè)面性能,這篇文章,我將詳細(xì)說(shuō)明怎樣利用 Chrome Dev Tools 進(jìn)行頁(yè)面性能分析及性能報(bào)告數(shù)據(jù)如何解讀。如果你認(rèn)真看了本文,一定能學(xué)會(huì)分析,沒(méi)學(xué)會(huì),你來(lái)找我~
上圖是 Chrome Dev Tools 的一個(gè)截圖,其中,我認(rèn)為能用于進(jìn)行頁(yè)面性能快速分析的主要是圖中圈出來(lái)的幾個(gè)模塊功能,這里簡(jiǎn)單介紹一下:
首先,我們?cè)诜治龅臅r(shí)候,建議使用隱身模式打開(kāi)頁(yè)面,排除一些插件等因素對(duì)頁(yè)面性能情況的影響。然后,我們把頁(yè)面緩存勾選去掉,要測(cè) disable cache 的情況,再把網(wǎng)絡(luò)情況調(diào)整一下,我們用電腦打開(kāi)頁(yè)面的時(shí)候一般都連著 wifi 等,要更真實(shí)一些去測(cè)頁(yè)面的性能,還是把網(wǎng)絡(luò)調(diào)到 3G 等情況比較好,如圖:
調(diào)整好之后,我們切到 Performance 面板,這里先說(shuō)明一下一些按鈕的作用:
上圖,從左到右分別代表的是:
這里,我以京東的一個(gè)頁(yè)面為例,勾選 disable cache,網(wǎng)絡(luò)情況為 Fast 3G,點(diǎn)擊2,然后就結(jié)果來(lái)說(shuō)明一下,應(yīng)該如何理解性能結(jié)果,找出優(yōu)化點(diǎn)。
我們先來(lái)看看網(wǎng)絡(luò)面板,看看都有哪些信息。如下圖所示:
https://wq.jd.com/wxportal/index_v6
,頁(yè)面加載回來(lái)的 document 就是一個(gè)渲染好的 html 頁(yè)面而個(gè)人認(rèn)為,還可以考慮用上的一些性能優(yōu)化手段有:
切到 Performance 面板,點(diǎn)擊自動(dòng)重啟頁(yè)面,并記錄整個(gè)頁(yè)面加載的過(guò)程,然后來(lái)分析結(jié)果~
網(wǎng)絡(luò)&&白屏
性能面板,有很多很多的參數(shù),我們要看一些比較常見(jiàn)的。首先看白屏?xí)r間和網(wǎng)絡(luò)加載情況,如下圖:
另外,我們可以看一下資源加載有沒(méi)有空白期,雖然上圖沒(méi)有,但是如果資源加載之間存在空白期,說(shuō)明沒(méi)有充分利用資源加載的空閑時(shí)間,可以調(diào)整一下。
首先,面板中會(huì)有很多的 Task,如果是耗時(shí)長(zhǎng)的 Task,其右上角會(huì)標(biāo)紅(圖中沒(méi)有,說(shuō)明頁(yè)面首屏的邏輯處理分配得還不錯(cuò)),這個(gè)時(shí)候,我們可以選中標(biāo)紅的 Task (這里就隨手選中一個(gè)),然后放大(選中,滑動(dòng)鼠標(biāo)可放大),看其具體的耗時(shí)點(diǎn)。
在 Timings 的區(qū)域,我們可以看到本次加載的一些關(guān)鍵時(shí)間,分別有:
我們可以選區(qū)(選擇從白屏到有內(nèi)容的區(qū)域,代表本次的頁(yè)面加載過(guò)程),可以對(duì)照著看一下上面的時(shí)間,截圖如下:
另外,我們可以看到頁(yè)面中的內(nèi)存使用的情況,比如 JS Heap(堆),如果曲線一直在增長(zhǎng),則說(shuō)明存在內(nèi)存泄露,從圖中可以看出,相當(dāng)長(zhǎng)的一段時(shí)間,內(nèi)存曲線都是沒(méi)有下降的,這里是有發(fā)生內(nèi)存泄露的可能的,在 Onload 之后,內(nèi)存才得到釋放。更多內(nèi)存泄露產(chǎn)生的原因及分析方法,可以參照我的這篇文章《Chrome 瀏覽器垃圾回收機(jī)制與內(nèi)存泄漏分析》
最下方就是頁(yè)面的一個(gè)整理耗時(shí)概況,如果 Scripting 時(shí)間過(guò)長(zhǎng),則說(shuō)明 js執(zhí)行的邏輯太多,可以考慮優(yōu)化js,如果渲染時(shí)間過(guò)長(zhǎng),則考慮優(yōu)化渲染過(guò)程,如果空閑時(shí)間過(guò)多,則可以考慮充分利用起來(lái),比如把一些上報(bào)操作放到頁(yè)面空閑時(shí)間再上報(bào)等。
以上就是性能面板可以看的一些信息。另外,我們可以借助 Layers面板來(lái)查看頁(yè)面分層情況的3D視圖,Rendering面板(點(diǎn)擊more tools->Rendering即可打開(kāi)),勾選Layer Bordersk可以看到復(fù)合層、RenderLayer區(qū)域,可以幫助分析動(dòng)畫(huà)卡頓、是否開(kāi)啟GPU加速等問(wèn)題,而 Memory 面板 和 JavaScript Profiler 面板主要是分析內(nèi)存泄露的,這里就不說(shuō)了,可以看我另一篇文章《Chrome 瀏覽器垃圾回收機(jī)制與內(nèi)存泄漏分析》
Audits 其實(shí)就是 LightHouse,LightHouse 是Google開(kāi)源的一個(gè)自動(dòng)化測(cè)試工具,它通過(guò)一系列的規(guī)則來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行評(píng)估分析,最終給出一份評(píng)估報(bào)告。它的面板是這樣的:
Audits主要從5個(gè)方面來(lái)給網(wǎng)頁(yè)打分,當(dāng)然你也可以去掉某些方面的評(píng)估。在選擇了設(shè)備、評(píng)估方面、網(wǎng)絡(luò)情況等選項(xiàng)后,點(diǎn)擊 Run Audits ,我們將會(huì)得到一份報(bào)告。
上圖是一個(gè)總體報(bào)告,可以看出,這個(gè)頁(yè)面的性能不太合格。當(dāng)然一次的測(cè)試也說(shuō)明不了什么問(wèn)題,只能做個(gè)參考。我們看它的性能指標(biāo)分別有:
這些時(shí)間,都可以點(diǎn)擊圖中紅框切換展示方式,會(huì)附上對(duì)應(yīng)的時(shí)間解釋?zhuān)缓罂梢渣c(diǎn)擊 Learn more 來(lái)查看詳細(xì)的指標(biāo)介紹。在文檔中,每一項(xiàng)指標(biāo)都會(huì)明確的分為三個(gè)部分:為什么說(shuō)此審查非常重要;如何通過(guò)此審查;如何實(shí)現(xiàn)此審查;
性能建議主要分為3類(lèi), Opportunities 可優(yōu)化項(xiàng)、手動(dòng)診斷項(xiàng)、通過(guò)的審查項(xiàng)。本次的例子如下圖:
圖中的每一項(xiàng)都可以展開(kāi)來(lái)看明細(xì)解釋?zhuān)渲校?/p>
可優(yōu)化項(xiàng)有2個(gè)建議:
這項(xiàng)里面的內(nèi)容指的是LightHouse發(fā)現(xiàn)的一些可以直接優(yōu)化的點(diǎn),你可以對(duì)應(yīng)這些點(diǎn)來(lái)進(jìn)行優(yōu)化。
手動(dòng)診斷項(xiàng)有6個(gè)建議:
這些項(xiàng)目表示LightHouse并不能替你決定當(dāng)前是好是壞,但是把詳情列出來(lái),由你手動(dòng)排查每個(gè)項(xiàng)目的情況
通過(guò)的審查項(xiàng)
這里列出的都是做的好的地方,本文例子共有16條,不過(guò)即使做的好,依然值得我們進(jìn)去仔細(xì)看一下,因?yàn)橄袼袟l目一樣,這里的每個(gè)條目也有一個(gè)showmore,我們可以點(diǎn)進(jìn)去仔細(xì)學(xué)習(xí)背后的知識(shí)和原理!
輔助功能指的是那些可能超出'普通'用戶(hù)范圍之外的用戶(hù)的體驗(yàn),他們以不同于你期望的方式訪問(wèn)你的網(wǎng)頁(yè)或進(jìn)行交互,本文的例子建議如下圖:
輔助功能類(lèi)別測(cè)試屏幕閱讀器的能力和其他輔助技術(shù)是否能在頁(yè)面中正常工作。例如:按元素來(lái)使用屬性,標(biāo)簽使用是否規(guī)范,img 標(biāo)簽是否缺少 alt 屬性,可辨別的元素命名等等。這一項(xiàng)我們不展開(kāi)講,但是還是建議大家按照審計(jì)建議修改一下網(wǎng)頁(yè)。
其他幾項(xiàng),本文的例子最佳實(shí)踐評(píng)分挺高的,而例子不支持PWA,也不需要考慮SEO,這里就不展開(kāi)說(shuō)明了,有對(duì)應(yīng)需求的可以自己詳細(xì)看看即可。
最后總結(jié)一下,我們利用Chrome Dev Tools 進(jìn)行頁(yè)面性能分析有以下指標(biāo)可以參考:
而這些分析方法,本文都詳細(xì)寫(xiě)了??梢哉J(rèn)真看看~
聯(lián)系客服