做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)
阿里測:
首頁:
一、效能打分
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
以上只是粗略介紹,更多詳細指標,小夥伴們還是自己去發現吧!