摘要：因此，如果可能，最好利用好毫秒響應(yīng)預(yù)先計算開銷大的工作，這樣網(wǎng)站就更有可能實現(xiàn)的性能?？臻e主線程工作分成不大于毫秒的塊。點擊按鈕見圖示，會在頁面運行時捕獲性能指標(biāo)。

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

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

下面分別從四個方面闡述RAIL模型：

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

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

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

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

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

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

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

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

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

下面的教程指引了如何利用chrome開發(fā)車工具(DevTools)的performance面板來分析運行時性能。

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

首先我們打開官網(wǎng)提供的demo,請確保用瀏覽器隱身模式打開，以保證瀏覽器是在一個純凈的環(huán)境中。否則，如果你安裝了很多瀏覽器擴展，會對你性能分析的數(shù)據(jù)產(chǎn)生一定的干擾。接著打開DevTools，具體方法：Command+Option+I (Mac) or Control+Shift+I (Windows, Linux)。

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

在DevTools中，點擊Performance面板

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

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

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

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

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

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

點擊Un-Optimize按鈕，藍色的方塊移動得更慢更松弛。

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

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

點擊Record按鈕（見圖示），DevTools會在頁面運行時捕獲性能指標(biāo)。

等待幾秒鐘

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這個代碼的問題在于，在動畫的每一幀都改變了藍色方塊的樣式并計算了每個方塊在頁面的位置。因為樣式改變了，瀏覽器卻不確定是否是每一個方塊的位置都改變了，因此瀏覽器為了計算方塊的位置，只能對方塊重新布局。可以查看Avoid forced synchronous layouts這篇文來了解如何避免大型、復(fù)雜的布局和布局抖動。

更多的時間線事件參考，請點擊這里

打開你要評估的頁面

打開performance面板

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

其他分析方式同上面的運行時性能評估。

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

可以使用chrome瀏覽器DevTools中的Performance面板來得到網(wǎng)頁的加載性能和運行時的性能數(shù)據(jù)，根據(jù)上文介紹的分析方法，結(jié)合RAIL模型來評估網(wǎng)頁性能的好與差。這是一個很有效的方法。具體如何提高網(wǎng)頁的性能呢？這又是一個大課題，相信網(wǎng)上也有不少與之相關(guān)的博文可以參考，筆者后續(xù)有時間也出相關(guān)博文。

Get Started With Analyzing Runtime Performance