●●●

前言

經(jīng)常能在博客或者論壇上看到很多有關(guān)前端性能優(yōu)化的文章，但是卻很少看到如何分析一個(gè)網(wǎng)頁(yè)的性能的文章。到底什么樣的指標(biāo)（或者說(shuō)是標(biāo)準(zhǔn)）代表這個(gè)網(wǎng)頁(yè)性能好或者不好，通過(guò)什么方式來(lái)得到這些指標(biāo)呢？因此，本文來(lái)講述下如何分析一個(gè)網(wǎng)頁(yè)的性能的好與差。

• 本文用到的工具：chrome瀏覽器。

●●●

用RAIL模型評(píng)估運(yùn)行時(shí)性能

首先要說(shuō)明的是，運(yùn)行性能是指你的網(wǎng)頁(yè)在運(yùn)行的時(shí)候的性能，而不是加載的時(shí)候的性能。RAIL（Response-Animation-Idle-Load）模型是一種以用戶為中心的性能模型，每個(gè)網(wǎng)絡(luò)應(yīng)用均具有與其生命周期相關(guān)的四個(gè)不同方面，且這些方面以不同的方式影響著性能。用官網(wǎng)圖來(lái)鎮(zhèn)壓一下：

下面分別從四個(gè)方面闡述RAIL模型：

以用戶為中心

任何網(wǎng)站的終極目標(biāo)不是讓其在任何特定設(shè)備上都能運(yùn)行很快，而是讓使用該網(wǎng)站的用戶滿意。用戶花在網(wǎng)站上的大多數(shù)時(shí)間不是等待加載，而是在使用過(guò)程中等待響應(yīng)。那么怎樣評(píng)價(jià)延遲？讓我們來(lái)看下面的表：

響應(yīng)（Response）: 在100毫秒以內(nèi)響應(yīng)

在用戶注意到滯后之前網(wǎng)站有100毫秒的時(shí)間可以響應(yīng)用戶輸入。這適用于大多數(shù)輸入，比如點(diǎn)擊按鈕、切換表單控件或是啟動(dòng)動(dòng)畫(huà)。但是不適用于觸摸拖動(dòng)或滾動(dòng)（因?yàn)橛|摸拖動(dòng)或滾動(dòng)屬于動(dòng)畫(huà)范疇）。如果網(wǎng)站未響應(yīng)，操作與反應(yīng)之間的連接就會(huì)中斷，用戶會(huì)注意到。因此，對(duì)于需要超過(guò)500毫秒才能完成的操作，需要始終提供反饋。

其實(shí)，有些動(dòng)作可以不等到用戶操作了才響應(yīng)。網(wǎng)站可以使用此100毫秒時(shí)間在后臺(tái)來(lái)執(zhí)行其他開(kāi)銷大的工作，但前提是不影響用戶當(dāng)前的操作。

動(dòng)畫(huà)（Animation）: 在10毫秒內(nèi)生成一幀（即達(dá)到60fps）

動(dòng)畫(huà)不止是奇特的UI效果，例如滾動(dòng)和觸摸拖動(dòng)也屬于動(dòng)畫(huà)類型。如果動(dòng)畫(huà)幀率發(fā)生變化，用戶便會(huì)注意到。網(wǎng)站的目標(biāo)是每秒生成60幀，每一幀必須完成以下所有步驟：

從純粹的數(shù)學(xué)角度而言，每幀的預(yù)算約為16毫秒（1000毫秒/60幀=16.66毫秒/幀）。但將新幀渲染到屏幕上也是需要花費(fèi)時(shí)間的，因此實(shí)際上瀏覽器只有10毫秒的時(shí)間來(lái)執(zhí)行代碼，如果無(wú)法符合此估算，幀率將下降，并且內(nèi)容會(huì)在屏幕上抖動(dòng)，也就是卡頓，會(huì)對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響。因此，如果可能，最好利用好100毫秒響應(yīng)預(yù)先計(jì)算開(kāi)銷大的工作，這樣網(wǎng)站就更有可能實(shí)現(xiàn)60fps的性能。

空閑（Idle）：最大程度增加空閑時(shí)間

可以利用空閑來(lái)完成推遲的工作。例如：盡可能減少預(yù)加載的數(shù)據(jù)，以便網(wǎng)站能夠快速加載，并利用空閑時(shí)間加載剩余數(shù)據(jù)。推遲的工作應(yīng)分成每個(gè)耗時(shí)約50毫秒的多個(gè)塊。如果用戶開(kāi)始交互，優(yōu)先級(jí)最高的事項(xiàng)是響應(yīng)用戶。要實(shí)現(xiàn)小于100毫秒的響應(yīng)，應(yīng)用必須在每50毫秒內(nèi)將控制返回給主線程，這樣網(wǎng)站就可以執(zhí)行其他像素管道、對(duì)用戶輸入作出反應(yīng)等命令。

因此，以50毫秒塊工作既可以完成任務(wù)，又能確保即時(shí)的響應(yīng)。

加載（Load）：在1000毫秒以內(nèi)呈現(xiàn)內(nèi)容

在1秒鐘內(nèi)加載網(wǎng)站，否則，用戶的注意力會(huì)分散，他們處理任務(wù)的感覺(jué)會(huì)中斷。其實(shí)也無(wú)需在1秒內(nèi)加載所有內(nèi)容以讓用戶產(chǎn)生完整加載的感覺(jué)。應(yīng)該啟用漸進(jìn)式渲染和在后臺(tái)執(zhí)行一些工作，將非必需的加載推遲到空閑時(shí)間段再來(lái)加載。

關(guān)鍵RAIL指標(biāo)匯總

要根據(jù)RAIL指標(biāo)評(píng)估您的網(wǎng)站，可使用Chrome的DevTools的performance面板（舊版本chrome可以用TimeLine工具）記錄用戶操作（具體可見(jiàn)下面一節(jié)講解如何記錄性能數(shù)據(jù)）。然后根據(jù)這些關(guān)鍵RAIL指標(biāo)檢查面板中的記錄時(shí)間。

●●●

利用chrome開(kāi)發(fā)者工具執(zhí)行運(yùn)行時(shí)性能評(píng)估

下面的教程指引了如何利用chrome開(kāi)發(fā)車(chē)工具(DevTools)的performance面板來(lái)分析運(yùn)行時(shí)性能。

注意：下面的指引基于chrome 62版本，如果你用了其他版本的chrome，其UI界面和特征會(huì)有些許的不同。

準(zhǔn)備工作

首先復(fù)制以下鏈接至瀏覽器獲取官網(wǎng)提供的demo：https://googlechrome.github.io/devtools-samples/jank/

請(qǐng)確保用瀏覽器隱身模式打開(kāi)，以保證瀏覽器是在一個(gè)純凈的環(huán)境中。否則，如果你安裝了很多瀏覽器擴(kuò)展，會(huì)對(duì)你性能分析的數(shù)據(jù)產(chǎn)生一定的干擾。接著打開(kāi)DevTools，具體方法：Command+Option+I (Mac) or Control+Shift+I (Windows, Linux)。

模擬手機(jī)CPU

手機(jī)設(shè)備具有比臺(tái)式機(jī)和筆記本更小的CPU頻率，無(wú)論何時(shí)評(píng)估你的網(wǎng)頁(yè)，你都必須使用CPU限制來(lái)模擬網(wǎng)頁(yè)在手機(jī)設(shè)備上表現(xiàn)。

在DevTools中，點(diǎn)擊Performance面板

確保Screenshots復(fù)選框選中

點(diǎn)擊Capture Settings（右上角的紅色設(shè)置圖標(biāo)），展開(kāi)其他設(shè)置

CPU中選擇4x slowdown，DevTools會(huì)將CPU頻率限制到平時(shí)的四分之一。

注意：如果測(cè)試其他頁(yè)面，如果想測(cè)試在低端機(jī)上的性能，可以選擇更低的倍數(shù)。這個(gè)只是為了更好的演示，選擇了小一點(diǎn)的限制。

設(shè)置demo

連續(xù)點(diǎn)擊Add 10按鈕，知道明顯能看到藍(lán)色方框比之前慢了，在高端機(jī)上可能要點(diǎn)擊20次左右。

點(diǎn)擊Optimize按鈕，藍(lán)色方框應(yīng)該移動(dòng)地更快更平穩(wěn)。

點(diǎn)擊Un-Optimize按鈕，藍(lán)色的方塊移動(dòng)得更慢更松弛。

注意：如果你沒(méi)有觀察到明顯變慢，嘗試點(diǎn)擊幾次Subtract 10按鈕再嘗試前面步驟。否則如果你添加了太多的藍(lán)色方框，就會(huì)耗盡CPU資源。

記錄運(yùn)行性能

當(dāng)你頁(yè)面運(yùn)行網(wǎng)頁(yè)的優(yōu)化版本，藍(lán)色方框移動(dòng)速度會(huì)變快。為了更好的檢測(cè)出性能問(wèn)題，我們記錄網(wǎng)頁(yè)非優(yōu)化的版本。

點(diǎn)擊Record按鈕（見(jiàn)圖示），DevTools會(huì)在頁(yè)面運(yùn)行時(shí)捕獲性能指標(biāo)。

等待幾秒鐘

點(diǎn)擊Stop按鈕（見(jiàn)圖示），DevTools停止記錄，并開(kāi)始處理數(shù)據(jù)，隨后將處理結(jié)果顯示在performance面板中,如下圖

分析結(jié)果

關(guān)鍵的性能指標(biāo)是FPS，其值如果是60FPS，用戶體驗(yàn)會(huì)很好，使用網(wǎng)站的感受也是愉悅的。

1. FPS圖表

查看FPS圖表（圖中藍(lán)色方框框住的部分），如果看到了紅色長(zhǎng)條，就代表幀率太低并已經(jīng)影響到用戶體驗(yàn)了。一般情況下，綠色長(zhǎng)條越高，FPS越高。

2. CPU圖表

在FPS下面就是CPU圖表，圖表中的顏色和面板底部的Summarytab中的顏色是匹配的。CPU顏色越豐富，代表在錄制過(guò)程中CPU已經(jīng)最大化了。如果這段豐富顏色的長(zhǎng)條比較長(zhǎng)，這就暗示網(wǎng)站應(yīng)該想辦法讓CPU做更少的工作了，也就是說(shuō)代碼邏輯需要做優(yōu)化了。

順便提一下的就是，無(wú)論鼠標(biāo)移動(dòng)到FPS,CPU或者NET圖表上，DevTools都會(huì)顯示在該時(shí)間節(jié)點(diǎn)上的屏幕截圖，將你的鼠標(biāo)左右移動(dòng)，可以重放錄制畫(huà)面，這被稱為擦洗，對(duì)于手動(dòng)分析動(dòng)畫(huà)進(jìn)程很有用。

3. Frames部分

在Frames部分，如果將你的鼠標(biāo)移動(dòng)至綠色方塊部分，會(huì)顯示在該特定幀上的FPS值，此例中每幀可能遠(yuǎn)低于60FPS的目標(biāo)。的確，在這個(gè)例子中，這個(gè)頁(yè)面的性能很差并且能很明顯地被觀察到，但是在實(shí)際場(chǎng)景中，可能并不是那么的容易，所以，要用所有這些工具來(lái)進(jìn)行綜合測(cè)量。

尋找瓶頸（追根溯源）

現(xiàn)在你已經(jīng)通過(guò)上面的各種方式了解并確信了這個(gè)網(wǎng)頁(yè)的性能不好，那么為什么會(huì)差呢？是什么導(dǎo)致它運(yùn)行的這么差的呢？

1. Summary tab

當(dāng)沒(méi)有選擇任何事件的時(shí)候，Summary tab顯示了網(wǎng)頁(yè)進(jìn)程活動(dòng)的分類。從圖中可以看出，這個(gè)網(wǎng)頁(yè)花費(fèi)了太多的時(shí)間在渲染（rendering）上了。因此，你的目標(biāo)就是減少渲染工作花費(fèi)的時(shí)間。

2.?Main部分

展開(kāi)Main部分，DevTools將顯示主線程上的隨著時(shí)間推移的活動(dòng)火焰圖。x軸代表隨時(shí)間推移的記錄，每個(gè)長(zhǎng)條代表一個(gè)事件，長(zhǎng)條越寬，代表這個(gè)事件花費(fèi)的時(shí)間越長(zhǎng)。y軸代表調(diào)用堆棧，當(dāng)你看到堆疊在一起的事件時(shí)，意味著上層事件發(fā)起了下層事件。

可以通過(guò)單擊、鼠標(biāo)滾動(dòng)或者拖動(dòng)來(lái)選中FPS,CPU或NET圖標(biāo)中的一部分，Main部分和Summary Tab就會(huì)只顯示選中部分的錄制信息。注意Animation Frame Fired事件右上角的紅色三角形圖標(biāo)，該紅色三角圖標(biāo)是這個(gè)事件有問(wèn)題的警告。

單擊Animation Frame Fired事件,Summary tab會(huì)顯示該事件相關(guān)的信息。

注意reveal，點(diǎn)擊它，會(huì)高亮觸發(fā)Animation Frame Fired事件的事件。

注意app.js:95,點(diǎn)擊它，會(huì)跳轉(zhuǎn)到source面板對(duì)應(yīng)的源碼及其對(duì)應(yīng)的行號(hào)。

當(dāng)選中了一個(gè)事件之后，可以使用鍵盤(pán)上的箭頭來(lái)選擇前面或者后面的事件

在Animation Frame Fired事件下面有一群紫色的事件。如果把它們放寬一點(diǎn)，會(huì)看到幾乎每個(gè)紫色事件的右上角都有紅色三角形圖標(biāo)。點(diǎn)擊其中一個(gè)紫色事件（其實(shí)就是Layout事件），Summary tab會(huì)顯示該事件更詳細(xì)的信息。確實(shí)，這里有一個(gè)強(qiáng)制reflow的警告。

在Summary tab，點(diǎn)擊Recalculation Forced下面的app.js:71,DevTools會(huì)跳轉(zhuǎn)到觸發(fā)強(qiáng)制reflow的代碼行。

這個(gè)代碼的問(wèn)題在于，在動(dòng)畫(huà)的每一幀都改變了藍(lán)色方塊的樣式并計(jì)算了每個(gè)方塊在頁(yè)面的位置。因?yàn)闃邮礁淖兞?#xff0c;瀏覽器卻不確定是否是每一個(gè)方塊的位置都改變了，因此瀏覽器為了計(jì)算方塊的位置，只能對(duì)方塊重新布局。

●●●

利用chrome開(kāi)發(fā)者工具執(zhí)行加載性能評(píng)估

打開(kāi)你要評(píng)估的頁(yè)面

打開(kāi)performance面板

點(diǎn)擊Start profiling and reload page（圖中藍(lán)色方框框住部分），DevTools在頁(yè)面重新加載時(shí)記錄性能指標(biāo)，然后在加載完成后幾秒鐘自動(dòng)停止錄制。

其他分析方式同上面的運(yùn)行時(shí)性能評(píng)估。

如同評(píng)估運(yùn)行時(shí)性能一樣設(shè)置了CPU限制，你也可以在設(shè)置里面設(shè)置network控制，來(lái)調(diào)整你想要的網(wǎng)絡(luò)速度環(huán)境。

●●●

總結(jié)

可以使用chrome瀏覽器DevTools中的Performance面板來(lái)得到網(wǎng)頁(yè)的加載性能和運(yùn)行時(shí)的性能數(shù)據(jù)，根據(jù)上文介紹的分析方法，結(jié)合RAIL模型來(lái)評(píng)估網(wǎng)頁(yè)性能的好與差。這是一個(gè)很有效的方法。

想做“沖頂大會(huì)”？全球首套直播競(jìng)答解決方案來(lái)了！

總結(jié)

以上是生活随笔為你收集整理的网页性能分析不完全指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。