[[398940]]

前言

工欲善其事，必先利其器。了解完性能指標之后，性能優(yōu)化的目標已經(jīng)明確了。接下來我們借助一些性能測量工具，明確網(wǎng)頁距離優(yōu)化目標之前還有多大的差距。一個好的工具可以讓你事半功倍，接下來我將用3篇文章分別介紹3個主流的測量工具：

Chrome DevTools Performance 主要用于日常開發(fā)過程中分析運行時的性能表現(xiàn)。

Lighthouse 用來生成網(wǎng)頁的性能評測報告。

WebPageTest 用來進行整體的網(wǎng)站質(zhì)量評估、一站式性能評估。

有了這3個工具我們就可以從多個維度對網(wǎng)站性能進行全方位的評估。

性能測量工具-WebPageTest

WebPagetest的核心是用于測量和分析網(wǎng)頁的性能。它是 google 開源項目《make the web faster》的子項目，它本來是 AOL 內(nèi)部使用的工具，后來在2008年基于BSD開源。

官方網(wǎng)址：http://www.webpagetest.org/

原理

WebPageTest是一個PHP網(wǎng)站，用戶輸入網(wǎng)址、地點、自定義腳本等信息后，參數(shù)發(fā)送到后臺。后臺做些邏輯處理，再通過瀏覽器相關(guān)的代理程序，啟動Chrome、Firefox或IE。瀏覽器執(zhí)行完后將數(shù)據(jù)傳回給后臺，后臺再將數(shù)據(jù)保存起來，最后通過各種形式(圖、表格、列等)，將分析數(shù)據(jù)過的數(shù)據(jù)，呈現(xiàn)給用戶。

導(dǎo)航欄

首先打開WebPageTest 官網(wǎng)，可以看到如下界面：

1. Test History：能查看到測試歷史記錄。
2. API：webgetest API Key 允許開發(fā)人員在其工作流中自動執(zhí)行性能測試，以不斷提供更快的網(wǎng)頁。WebPageTest 支持的擴展開發(fā)，只要申請到一個key后，就可以根據(jù)提供的API做開發(fā)。不過調(diào)用次數(shù)都會有限制，所以如果要做還是在自己本地或內(nèi)網(wǎng)布置一個WebPageTest的環(huán)境。
3. Forums：論壇信息，里面有許多提問和回答，覆蓋面非常廣。
4. Docs：英文版工具文檔，中文文檔可以參照這個網(wǎng)址 https://github.com/pwstrick/WebPagetest-Docs
5. Blog：博客，里面是一些 WebpageTest 的一些最佳實踐方案等
6. About：給出了WebPageTest的Github地址，以及發(fā)布版的下載地址等信息。

基本使用

基礎(chǔ)配置

1. 輸入網(wǎng)頁網(wǎng)址：確定要測試的頁面后，轉(zhuǎn)到WebPagetest并為其指定要測試的頁面的URL，這個地址可以是首頁也可以是詳情頁。
2. 選擇地理位置：WebPagetest具有位于世界各地的測試機器，你應(yīng)該從接近用戶訪問的位置進行測試，從列表中選擇一個位置，或者單擊Select from Map按鈕，從地圖視圖中選擇一個位置(只需單擊氣球🎈，然后確定)
3. 選擇瀏覽器：不同的位置支持不同的瀏覽器，如果給定的位置沒有正在尋找的瀏覽器，可以嘗試不同的位置。通常建議使用chrome瀏覽器。

高級配置

1. 運行測試次數(shù)：為保證測試結(jié)果的準確性，每次運行都會測試多次
2. 是否重復(fù)訪問：因為重復(fù)訪問會優(yōu)先走緩存，所以結(jié)果可能會有差別
3. 提交測試：一切配置完成后，點擊Start Test按鈕，請求將發(fā)送到測試位置進行測試。測試可能需要一段時間才能運行，具體取決于有多少次測試(在測試之前至少有一分鐘的測試時間，但是它的時間甚至更長)。一旦測試完成，你將得到結(jié)果。

本地部署

官網(wǎng)中只能測試一些外網(wǎng)能訪問的網(wǎng)站，但是往往開發(fā)過程中有些項目我們都發(fā)布在公司內(nèi)部的局域網(wǎng)內(nèi)，所以就需要將WebPagetest部署到本地，使用本地的網(wǎng)絡(luò)環(huán)境來測試性能。

注意：這里提到的本地部署，是指本地局域網(wǎng)內(nèi)服務(wù)器上部署的網(wǎng)站，不是本地電腦的locallhost，因為在本地測試locallhost往往是不準確的，因為大多數(shù)情況下，本地開發(fā)調(diào)試的頁面都是webpack dev sever服務(wù)器，資源沒有經(jīng)過壓縮，所以加載速度也會很慢，和線上環(huán)境的結(jié)果往往會大相徑庭。

具體步驟如下：

1.下載并安裝docker鏡像，下載地址 https://docs.docker.com/get-docker/

為什么安裝docker鏡像?docker類似于一個虛擬機，在虛擬機上下載WebPageTest的鏡像，我們就是不需要獨立安裝WebPageTest這個軟件了，這樣可以不受系統(tǒng)限制，完全獨立出一套虛擬的環(huán)境，通過端口映射到本地服務(wù)。

2.拉取鏡像

docker pull webpagetest 
docker pull webpagetest/agent 

3.運行server實例

docker run -d -p 4000:80 webpagetest/server 

4.運行agent實例

docker run -d -p 4000:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent 

5.訪問http://localhost:4000，會看到 WebPagetest 官網(wǎng)一樣的頁面，在這個頁面中輸入本地其它端口的網(wǎng)址，我們就可以測試本地服務(wù)的性能了。

結(jié)果分析

1. 優(yōu)化等級

在結(jié)果頁面的頂部是一組最關(guān)鍵的性能優(yōu)化等級。涵蓋了適用于所有網(wǎng)站的基本優(yōu)化，任何不是A或B的都需要進行進一步的優(yōu)化.

2. 性能指標總結(jié)

結(jié)果頁頂部的數(shù)據(jù)表提供了有關(guān)已加載頁面的一些高級信息，其中首次和重復(fù)訪問視圖的指標都有清晰的看到首次和重復(fù)視圖訪問的結(jié)果。

首次視圖(First View)：首次視圖的測試，將會把瀏覽器的緩存和Cookie清除，表示訪問者第一次訪問該網(wǎng)頁將體驗到的情況。

重復(fù)視圖(Repeat View)：重復(fù)視圖會在首次視圖測試后立即執(zhí)行，不會清除任何內(nèi)容。瀏覽器窗口在First View測試后關(guān)閉，然后啟動新瀏覽器以執(zhí)行Repeat View測試。重復(fù)視圖測試模擬的是用戶離開頁面后，馬上再進入此頁面的場景。

除此之外，這里介紹幾個關(guān)鍵指標：

1. 首字節(jié)時間(Time To First Byte)：首字節(jié)時間(通?？s寫為TTFB)指的是被測量為從初始化請求，到服務(wù)器響應(yīng)的第一個字節(jié)，被瀏覽器接收的時間(不包括DNS查詢、TCP連接的時間)。
2. 頁面渲染時間(Start Render)：測量的時間是從初始化請求，到第一個內(nèi)容被繪制到瀏覽器顯示的時間。Start Render是通過捕獲頁面加載的視頻，并在瀏覽器第一次顯示除空白頁之外的其他內(nèi)容時查看每個幀來衡量的。它只能在實驗室測量，通常是最準確的測量。
3. 速度指數(shù)(Speed Index)：速度指數(shù)是一個計算的指標，用來衡量頁面渲染用戶可見內(nèi)容的迅速程度(越低越好)。關(guān)于計算方法的更多信息，請點擊此處查看。
4. 阻塞交互時間(Total Blocking Time)：是指頁面阻塞，用戶不能進行交互的累計時間，這里可以看到二次訪問時資源緩存減少了阻塞時間。
5. 文檔加載完畢(Document Complete)：從初始化請求，到加載所有靜態(tài)內(nèi)容(圖片、CSS、JavaScript等)，但可能不包括由JavaScript執(zhí)行觸發(fā)的內(nèi)容，可以理解為開始執(zhí)行window.onload。
6. 頁面所有元素加載時間(Fully Loaded)：指的是從初始化請求，到Document Complete后，2秒內(nèi)(中間幾百毫秒輪詢)沒有網(wǎng)絡(luò)活動的時間，但這2秒是不包括在測量中的，所以會出現(xiàn)兩個差值大于或小于2秒。

首字節(jié)加載時間和首字節(jié)時間的區(qū)別

首字節(jié)加載時間(First Byte Time)：是指瀏覽器收到HTML內(nèi)容的第一個字節(jié)時間，包括DNS查找、TCP連接、SSL協(xié)商(如果是HTTPS請求)和TTFB。

首字節(jié)時間 TTFB(Time To First Byte)：首字節(jié)是指被測量為從初始化請求，到服務(wù)器響應(yīng)的第一個字節(jié)，被瀏覽器接收的時間(不包括DNS查詢、TCP連接的時間)。我理解TTFB的計算是從下圖中requestStart到responseStart這之間的時間，也就是請求發(fā)送出去的時間。

所以，首字節(jié)加載時間 = DNS查找時間+TCP連接時間+SSL協(xié)商時間+TTFB請求發(fā)送出去的時間

3. waterfall chart 請求瀑布圖

在結(jié)果頁的下方我們可以看到每次運行顯示的瀑布圖，點擊進去可以看到具體的參數(shù)詳情，如下圖所示：

在這張圖上我們可以看到所有的請求資源都列舉了出來，里面的信息比 Chrome DevTools給出的信息更加詳細，例如下方的幾個指標：

1. Browser Main Thread：瀏覽器主線程占用情況，什么時間比較忙
2. Long Tasks：長任務(wù)時間，也就是頁面的科技可交互時間，紅色區(qū)域代表阻塞時間
3. Bandwidth In：帶寬
4. CPU Utization：CPU占用情況

除此之外，在下圖中我們還可以看到一些優(yōu)化的點，比如42-50這些并行請求的圖片資源減少了資源加載時間，還有57-58黃色高亮部分資源發(fā)生了重定向，WebpageTest 提示我們這里資源發(fā)生了變化，可以優(yōu)化為不進行資源重定向。

總結(jié)

1. WebpageTest的使用方式：訪問官網(wǎng)測試、安裝本地鏡像測試
2. WebpageTest的關(guān)鍵指標：首字節(jié)時間(First Byte)、頁面渲染時間(Start Render)、速度指數(shù)(Speed Index)、阻塞交互時間(Total Blocking Time)、文檔加載完畢(Document Complete)、頁面所有元素加載時間(Fully Loaded)
3. 首字節(jié)加載時間 = DNS查找時間 + TCP連接時間 + SSL協(xié)商時間 + TTFB請求發(fā)送出去的時間