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

 首頁:

一、性能打分

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尺寸過大會得到警告.

二、詳情分析

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)連接,以及通過每個連接所加載的資源。

 

三、元素分布

s)         資源類型統計:css,html,image,js,other(請求數,大小)

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

 

四、視圖分析

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

 

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

 

以上只是粗略介紹,更多詳細指標,小伙伴們還是自己去發現吧!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM