乾貨分享丨當我們感覺開啟網頁很慢的時候，到底是什麼原因呢？

一、我們經常遇到的問題

在我們的測試日常中，不免會遇到網頁效能感知測試的工作，比如：測試訪問某個網頁耗時。針對此類測試，筆者經歷過兩種簡單的方法：測試網頁使用的後端介面響應耗時等同為網頁耗時;使用秒錶計算網頁響應耗時。

測試網頁響應耗時，我們需要知道觸發網頁請求時，直至網頁重新整理、響應，整個過程到底包含了些什麼。從大體來分，主要包含兩部分耗時：後端介面請求響應耗時和前端頁面資源載入耗時。而拋開前端頁面資源載入時間，單純將後端介面響應耗時等同為網頁響應耗時是不準確的;而不清除瀏覽器本身資源配置和消耗，簡單使用秒錶計算網頁響應耗時，結果是粗泛不準確的。

那麼，我們應該怎麼測試網頁響應耗時呢?當我們感覺開啟網頁很慢的時候，到底是因為什麼原因呢?加我VX：ww-51testing 回覆“測試”，同時領取限量軟體測試學習資料哦~~

二、認識Performance皮膚

工欲善其事必先利其器，你知道測試網頁應用，瀏覽器是必不可少的。但是，如何利用瀏覽器分析網頁效能，你知道嗎?

以Chrome為例，首先，讓我們再來認識一下這個強大、豐富的工具——“開發者工具”。使用Ctrl+Shift+I開啟開發者工具，可見Elements、Source、Network、Performance等9大皮膚。我們分析網頁效能時，主要使用的是Performance皮膚。

以百度搜尋“51testing”為例，開啟Chrome開發者工具，切換到Performance皮膚，點選record按鈕，記錄網頁操作，記錄結果如圖2所示。

圖1 Performance皮膚記錄百度搜尋操作結果

在分析網頁效能之前，我們先認識下Performance皮膚的一些功能。如圖2所示，Performance皮膚從上到下主要分為4個功能區：具體操作區，概覽區，效能分析區，效能摘要區。

1.具體操作區：包含錄製，重新整理頁面分析，清除結果等一系列操作;

2.概覽區：高度概括隨時間線的變動，包括FPS，CPU，NET，每個時間段執行的事件順序，可以知道每個時間段(精確到毫秒)都做了什麼。當滑鼠放上去的時候，我們還可以大圖的形式去檢視我們每個時間段介面的渲染情況;

3.效能分析區：從不同的角度分析框選區域 。例如：Network可以直觀的看到後臺請求響應時長，Frames可以直觀看到每幀載入耗時，Main 是Performance工具中比較重要的部分，記錄了渲染程式中主執行緒的執行記錄，點選main可以看到某個任務執行的具體情況;

4.效能摘要區：精確到毫秒級的分析，以及按呼叫層級，事件分類的整理。

圖2 Performance皮膚功能區

三、Performance皮膚實踐

瞭解了Performance皮膚之後，讓我們來“康康”，如何結合Performance皮膚分析和解決我們遇到的問題。

1.如何監測網頁響應耗時?

結合Performance皮膚的概覽區和效能分析區的Frames檢視，拖動觀察區域，可以清楚地獲知每幀圖片載入耗時。以圖2為例，可以看出從輸入關鍵字“51testing”到顯示搜尋結果，整個過程網頁耗時1332ms。使用Performance皮膚，可以更加精確計算網頁響應耗時。此外，透過FPS圖表，可以看到幀率波動(如下圖箭頭所示)。通常，綠色條越高，FPS越高，只要在FPS上方看到了紅色條，就表示幀率下降的很低，當動畫以60FPS執行時，使用者會感覺很流暢。

2.如何分析網頁響應過程中各個階段耗時?

點選效能分析區的main功能，在效能摘要區可以看到每個階段，如Loading(載入)、Scripting (js計算時間)、Rendering (渲染時間)等耗時。還可以看到每個事件耗時(一段橫條代表執行一個事件,長度越長,花費的時間越多)，和該事件的呼叫棧及其呼叫棧耗時(豎向代表呼叫棧)，從下圖可知，搜下“51testing”到響應出結果的過程中，Scripting耗時佔比最大。且透過main功能，可以看到如果在這些橫條中右上角是紅色的就表示在該段程式碼執行過程中可能存在效能問題，如下圖箭頭所示部分。

3.如何分析網頁響應中各個介面呼叫耗時?

點選效能分析區的network功能，可以看到，在網頁響應過程中，每個請求的網路耗時和資源載入耗時。

4.如何識別網頁記憶體溢位?

在開始Performance錄製時，勾選具體操作區的“Memory”選項，Performance皮膚會記錄網頁載入過程中，不同的時間段，不同事件(如下圖中所示的JS Heap，Documents等)的執行情況的記憶體消耗。透過觀察概覽區的記憶體隨時間線變化，如果記憶體呈不斷增長的趨勢，那麼，就可能存在記憶體溢位的情況。