如何分析頁面性能？

01-02

Web頁面載入，如何分析頁面性能？如何進行優化？

一、瀏覽器載入過程：

1、建立連接過程

(1) 瀏覽器查找域名的IP地址

　　(2) 瀏覽器給web伺服器發送一個HTTP請求

　　(3) 伺服器發送永久重定向響應

　　(4) 瀏覽器跟蹤重定向地址

　　(5) 伺服器「處理」請求

　　(6) 伺服器發回一個HTML響應

2、瀏覽器渲染

解析HTML

↓

構建DOM樹

↓

渲染樹構建

↓

渲染樹布局

↓

繪製渲染樹

二、優化方法

1、啟用瀏覽器緩存

　　瀏覽器要根據域名找出IP地址，而DNS查找過程的第一步是在瀏覽器緩存中查找，根據Chrome的PageSpeed給出的建議：要利用瀏覽器緩存存儲可緩存的資源。在 HTTP 標頭中為靜態資源設置有效期或最長存在時間，可指示瀏覽器從本地磁碟中載入以前下載的資源而不是從網路中載入。

HTTP 1.1提供的緩存方法主要有兩種：

(1) Expires和Cache-Control：max-age. 即內容在緩存中的生命有效期。第一次請求後將在生命有效期之內直接從本地緩存中拿取。

　　(2) Last-Modified和ETag.：Last-Modified標記文件最後一次修改的時間，瀏覽器請求是在頭部加入上次請求緩存下來的Last-Modified時間，若兩次請求期間伺服器的內容沒有修改，伺服器返回304 Not Modified，則不下載資源，瀏覽器直接使用本地緩存；否則，伺服器會返回200以及更新後的版本。ETag是伺服器對於文件生成的Hash散列，其生成演算法與最後一次修改的時間相關。瀏覽器第二次請求發送上次的ETag信息，伺服器通過簡單的比對就知道是否應該返回304還是200。PageSpeed建議，要為資源指定Last-Modified或ETag標頭，以便啟動緩存驗證。

2、頁面內容組織

　　① 為 HTML 文檔指定字符集，可讓瀏覽器立即開始執行腳本。

　　② 將內嵌樣式塊和 & 元素從文檔主體移至文檔標題，可改善顯示性能。

　　③ 將小型樣式表或者腳本內嵌到主 HTML 網頁中，可減少在下載其他資源時的往返時間 (RTT) 和延遲時間。

④ 正確地排列外部樣式表與外部和內嵌腳本的順序，可增加下載時同時載入的數據量，並提高瀏覽器顯示網頁的速度。為確保能夠並行下載這CSS 文件，始終將外部 CSS 文件排在外部 JavaScript 文件前面。

PS：有圖有真相

VS：

3、HTML

　　① 使用HTML5新標籤，例如header、footer、section、nav、article。因為它們語義化，速度快，結構合理，瀏覽器上識別能力強。

　　② 減少HTML標籤嵌套深度，嵌套越深，在移動端的Web頁面渲染速度以及滾動流暢度都會有所減低。

　　③ 為圖片指定大小，減少重排。

　　④ 壓縮HTML。

4、 CSS

　　① 使用CssSprite將零星的背景圖包含到一張圖中，通過background-position來使它顯示在正確的位置；只請求一張圖，減少了HTTP請求的次數。

　　② 模塊化、精簡css，提高復用率。

　　③ 減少漸變、陰影的使用。

　　④ 合理使用CSS3高性能動畫，Translate3d支持硬體加速。

　　⑤ 避免使用濾鏡。

　　⑥ 不使用@import。

　　⑦ 合併和壓縮CSS代碼。

5、JavaScript

　　① 暫緩 JavaScript 解析，暫緩解析不需要的 JavaScript（等到需要執行時再進行解析），可以提高網頁的初始載入速度。

　　② 使用事件委託機制，避免頻繁操作DOM節點。

　　③ 模塊化代碼：SeaJs。

　　④ 合併和壓縮JavaScript代碼。

　　⑤ 壓縮工具：YUI Compressor或JSMin等。

6、圖片優化

① 圖片時頁面大部分載入時間所花的地方，在圖片設計的時候應該考慮相應的圖片大小和格式

② 壓縮圖片

三、實戰分析

1、 network

2、status看資源請求情況

3、timeline 可看頁面渲染情況

4、profiles可看函數執行情況

四、工具

1、Chrome Developer Tools —— 分析性能

2、PageSpeed —— 查看性能建議

　　3、Fiddler —— HTTP/HTTPS網路調試

以上大多數總結自yahoo前端優化規則 Chrome pagespeed的優化建議

請指正。

評判頁面性能可以從N個維度，響應時間，頁面渲染，圖片大小，DNS查詢次數，是否使用keep-alive,首位元組響應時間，文件是否精簡，是否有錯誤響應，等等等等，性能極客一共會評估33項子集，把這33項分成5大維度：網路，設計，多媒體，系統，速度，每個維度有若干子集，會分別打分，然後按一定權重綜合分析五個維度，最後會給該頁面打分。。

各維度打分:

綜合打分：

雅虎YSlow(V2)將頁面性能評價的分析項定為23項，每項的滿分都是100分且有自己的評價規則，當監測到的數據不符合規則時，yslow就會根據不符合的嚴重程度扣分，從而計算出每個分析項的得分。之後yslow再根據每個分析項的重要程度為其分配權重，最終計算出一個綜合得分，即頁面性能指數。

分析項

權重

分析點

配置信息目錄

分值計算

HTTP請求

js = 3，css = 4，css
images = 3

max js = 3，max css = 2，max css images = 6

(N JS - 3) * 3，(N CSS - 2) *
4，(N CSS images - 6) * 3

CDN的使用

模式= CDN主機名RegExp模式，類型= javascript、css、圖像、css圖像,flash,圖標

N 個不匹配RegExp * 10

(/favicon.ico除外)

空src或href

100

N個空src & * 100

N 個空href & * 100

添加過期頭

範圍= 172800s (2
days)

類型= js, css, 圖片, css圖片, flash,圖標

N (不過期或者任意類型過期時間&< 2 天) * 11

Gzip壓縮

最小文件大小= 500
bytes

類型= doc,
iframe, xhr, js, css

N (不可壓縮or 任意類型文件大小&<500b) * 11

CSS放置頁頭

1 + N CSS鏈接標籤on BODY * 10

Js放置頁尾

N JS on HEAD * 5（忽略注入、延期和非同步JS）

Css表達式

N （CSS 鏈接文件或者style文件內嵌的表達式）* 2

JS和CSS位置

n/a

none

DNS查詢次數

最大域名數= 4

N個域名&> 4 AND

(N個域名- 4) * 5

JS和CSS大小

類型= js, css

N (unminified JS
or CSS external or inline)) * 10

URL重定向

N重定向* 10

JS和CSS重複性

類型= js, css

N (重複的JS or CSS) * 5

配置ETags

類型= js, css, 圖片, css圖片, flash, 圖標

N 任意類型的錯誤ETags* 11

Ajax請求被緩存

最小緩存時間= 3600s

N (沒被緩存的或者expiring in &< 3600s) XHR * 5

使用Ajax

N （沒有用到GET的XHRs）XHRs * 5

DOM元素數量

範圍= 250

最大dom數= 900

N DOM元素&> 900 AND(N DOM 元素- 900) /
250 * 10

HTTP 404錯誤

類型= js, css, 圖片, css圖片, flash, 圖標,
xhr

N 404 * 5

Cookie大小

最大cookie大小= 1000

Cookie大小&> 1000 AND

1+ (cookie
大小/ 1000) * 10

使用無Cookie域名

類型= js, css, 圖片, css圖片, flash, 圖標,

N (任意大小的任何類型的cookie組件) * 5

忽略/favicon.ico

使用濾鏡

half points = 2

N alpha filters
* 5 + M _hack alpha filters * 2

不要在HTML裡面縮放圖片

N (圖片按比例縮小寬頻或高度) * 5

網站圖標

大小= 2000b

最小緩存時間= 3600s

404圖標= 5，圖標大小&> 2000b = 5，沒有過期圖片或者過期時間&< 3600s = 5

推薦個頁面性能監控和優化的工具：監控寶。它是以雅虎YSlow(V2)為標準，可以對頁面綜合性能的全面監控、分析與優化。通過「頁面性能指數」、「頁面響應時間」和「可用率」3項關鍵指標幫助您很好地了解網頁綜合性能，用曲線圖、餅圖、柱狀圖、瀑布圖等可視化方式查看數據，分析頁面元素，指出頁面存在的問題提出解決方案，為優化站點提供依據。

以上僅供參考。

PageSpeed Insights

YSlow