Web頁面性能測試工具淺析

作Web開發，不免要對本身開發的頁面進行性能檢測，本身寫工具檢測，工做量太大。網上有幾款比較成熟的檢測工具，如下就介紹一下，與你們分享。

互聯網現有工具

基於網頁分析工具：

1.       阿里測

2.　　 百度應用性能檢測中心

2.       Web PageTest

3.       PingDom Tools

4.       GTmetrix

 

基於瀏覽器分析工具：

1.       Chrome自帶工具F12

2.       Firefox插件：YSlow（Yahoo工具）

3.       Page Speed（google）

 

（如下以分析博客園網站爲例www.cnblogs.com）

阿里測：

http://www.alibench.com

 首頁：

1、性能打分

a)         首字節時間

指標解釋：瀏覽器開始收到服務器響應數據的時間(後臺處理時間+重定向時間)
評估方法：達標時間=DNS解析時間+建立鏈接時間+SSL認證時間+100ms. 比達標時間每慢10ms減1分.

b)         使用長鏈接（keep alive）

指標解釋： 服務器開啓長鏈接後針對同一域名的多個頁面元素將會複用同一下載鏈接(socket)
評估方法：服務器是否返回了"Connection: keep-alive"HTTP響應頭,或者瀏覽器經過同一鏈接下載了多個對象

c)         開啓GZIP壓縮

指標解釋：僅檢查文本類型("text/*","*javascript*")
評估方法：服務器是否返回了"Transfer-encoding: gzip"響應頭。假如所有壓縮就是滿分，不然:得分=滿分x(100%-所有gzip後節省的比例%)

d)         圖片壓縮

評估方法：
對於GIF - 略過
對於PNG - 必須是8位或更低
對於JPEG - 對比使用photoshop質量選擇50後的圖片,尺寸超出10%之內及格,10%-50%警告,50%以上不達標
得分=滿分x(100%-圖片從新壓縮後能夠節省的比例%)

e)         設置靜態內容緩存時間

指標解釋：css,js,圖片資源都應該明確的指定一個緩存時間
評估標準：若是有靜態文件的過時時間設置小於30天，將會獲得警告

f)          合併css和js文件

指標解釋：合併js和css文件能夠減小鏈接數
評估方法：每多一個css文件減5分，每多一個js文件減10分

g)         壓縮JS

指標解釋：除了開啓gzip,使用js壓縮工具能夠進行代碼級的壓縮
評估方法：js文件會經過jsmin壓縮.若是原始文件gzip過,jsmin處理過的文件也會gzip後再進行對比.若是能節省>5KB或者%10的尺寸,評估失敗.若是能節省>1KB一樣會收到警告.

h)         合理使用cookie

指標解釋：cookie越小越好,並且對於靜態文件須要避免設置cookie
評估方法：只要對靜態文件域設置了cookie，評估失敗. 對於其餘請求，cookie尺寸過大會獲得警告.

2、詳情分析

i)           首次探測（首次探測會清空DNS緩存和瀏覽器緩存），重複探測（保留首次探測的緩存，進行再次探測）。

j)           頁面加載時間：從頁面開始加載到頁面onload事件觸發的時間。

k)         首字節時間：從開始加載到收到服務器返回數據的第一字節的時間。

l)           開始渲染時間：從開始加載到瀏覽器開始渲染第一個html元素的時間。

m)       Speed index：

n)         元素個數：頁面中包含的全部DOM節點個數

o)         頁面加載（包括加載時間，請求數，下載總計）：從頁面開始加載到onload事件觸發這個時間段內的統計數據，通常來講onload觸發表明着直接經過HTML引用的CSS，JS，圖片資源已經徹底加載完畢。

p)         徹底加載：隨着ajax應用的流行，不少資源都會經過JS腳步異步加載，因此onload事件並不意味着徹底加載，onload以後js可能依然在異步加載資源。徹底加載的定義是：頁面onload後2秒內再也不有網絡請求時刻。

q)         元素瀑布圖：經過元素瀑布圖能夠很直觀獲得如下信息。

                         i.              資源的加載順序。

                       ii.              每一個資源的排隊延遲，加載過程。

                      iii.              加載過程當中CPU和貸款的變化曲線。

                      iv.              統計出出錯請求、大圖片請求、onload以後的請求、開始渲染以前的請求、首字節較慢的請求及DNS解析較慢的請求個數。

r)          鏈接視圖展示了頁面加載過程當中建立的（keep-alive）鏈接，以及經過每一個鏈接所加載的資源。

 

3、元素分佈

s)         資源類型統計：css，html，image，js，other（請求數，大小）

t)          資源域名統計：請求域名個數及次數

 

4、視圖分析

將整個網頁生成的過程以膠片視圖、視頻、截屏的形式展示出來，並提供詳細的狀態欄加載日誌。   

 

YSlow：

 火狐插件（自行安裝）

評分等級指標：

1.       確保少許的HTTP請求（合併JS，CSS圖片等）

2.       使用內容分發CDN

3.       設置過時的HTTP Header.設置Expires Header能夠將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中。

4.       使用gzip壓縮

5.       將CSS放置html頭部

6.       將JavaScript放置底部

7.       Avoid CSS expressions

8.       使用外部引用JavaScript與CSS

9.       減小DNS解析

10.   壓縮JavaScript和CSS

11.   避免URL重定向。URL redirects are made using HTTP status codes 301 and 302. They tell the browser to go to another location.

12.   刪除重複JavaScript和CSS

13.   設置ETags

 

以上只是粗略介紹，更多詳細指標，小夥伴們仍是本身去發現吧！