日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
【性能優(yōu)化】性能測(cè)量工具-WebPageTest

前言

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

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

Lighthouse 用來(lái)生成網(wǎng)頁(yè)的性能評(píng)測(cè)報(bào)告。

WebPageTest 用來(lái)進(jìn)行整體的網(wǎng)站質(zhì)量評(píng)估、一站式性能評(píng)估。

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

性能測(cè)量工具-WebPageTest

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

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

原理

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

導(dǎo)航欄

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

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

基本使用

基礎(chǔ)配置

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

高級(jí)配置

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

本地部署

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

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

具體步驟如下：

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

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

2.拉取鏡像

 
 
 
 
    
  
  
  
  
  1. docker pull webpagetest 
    2.   
  
  
  
  2. docker pull webpagetest/agent 
    3.

3.運(yùn)行server實(shí)例

 
 
 
 
    
  
  
  
  
  1. docker run -d -p 4000:80 webpagetest/server 
    2.

4.運(yùn)行agent實(shí)例

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

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

結(jié)果分析

1. 優(yōu)化等級(jí)

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

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

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

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

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

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

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

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

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

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

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

3. waterfall chart 請(qǐng)求瀑布圖

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

在這張圖上我們可以看到所有的請(qǐng)求資源都列舉了出來(lái)，里面的信息比 Chrome DevTools給出的信息更加詳細(xì)，例如下方的幾個(gè)指標(biāo)：

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

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

總結(jié)

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

當(dāng)前題目：【性能優(yōu)化】性能測(cè)量工具-WebPageTest
本文URL：http://www.dlmjj.cn/article/cdepese.html