●●●

前言

經常能在博客或者論壇上看到很多有關前端性能優化的文章，但是卻很少看到如何分析一個網頁的性能的文章。到底什么樣的指標（或者說是標準）代表這個網頁性能好或者不好，通過什么方式來得到這些指標呢？因此，本文來講述下如何分析一個網頁的性能的好與差。

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

●●●

用RAIL模型評估運行時性能

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

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

以用戶為中心

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

響應（Response）: 在100毫秒以內響應

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

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

動畫（Animation）: 在10毫秒內生成一幀（即達到60fps）

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

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

空閑（Idle）：最大程度增加空閑時間

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

因此，以50毫秒塊工作既可以完成任務，又能確保即時的響應。

加載（Load）：在1000毫秒以內呈現內容

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

關鍵RAIL指標匯總

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

●●●

利用chrome開發者工具執行運行時性能評估

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

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

準備工作

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

請確保用瀏覽器隱身模式打開，以保證瀏覽器是在一個純凈的環境中。否則，如果你安裝了很多瀏覽器擴展，會對你性能分析的數據產生一定的干擾。接著打開DevTools，具體方法：Command+Option+I (Mac) or Control+Shift+I (Windows, Linux)。

模擬手機CPU

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

在DevTools中，點擊Performance面板

確保Screenshots復選框選中

點擊Capture Settings（右上角的紅色設置圖標），展開其他設置

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

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

設置demo

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

點擊Optimize按鈕，藍色方框應該移動地更快更平穩。

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

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

記錄運行性能

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

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

等待幾秒鐘

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

分析結果

關鍵的性能指標是FPS，其值如果是60FPS，用戶體驗會很好，使用網站的感受也是愉悅的。

1. FPS圖表

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

2. CPU圖表

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

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

3. Frames部分

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

尋找瓶頸（追根溯源）

現在你已經通過上面的各種方式了解并確信了這個網頁的性能不好，那么為什么會差呢？是什么導致它運行的這么差的呢？

1. Summary tab

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

2.?Main部分

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

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

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

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

注意app.js:95,點擊它，會跳轉到source面板對應的源碼及其對應的行號。

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

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

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

這個代碼的問題在于，在動畫的每一幀都改變了藍色方塊的樣式并計算了每個方塊在頁面的位置。因為樣式改變了，瀏覽器卻不確定是否是每一個方塊的位置都改變了，因此瀏覽器為了計算方塊的位置，只能對方塊重新布局。

●●●

利用chrome開發者工具執行加載性能評估

打開你要評估的頁面

打開performance面板

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

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

如同評估運行時性能一樣設置了CPU限制，你也可以在設置里面設置network控制，來調整你想要的網絡速度環境。

●●●

總結

可以使用chrome瀏覽器DevTools中的Performance面板來得到網頁的加載性能和運行時的性能數據，根據上文介紹的分析方法，結合RAIL模型來評估網頁性能的好與差。這是一個很有效的方法。

想做“沖頂大會”？全球首套直播競答解決方案來了！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。