Web前端性能測試-性能測試知多少---深刻分析前端站點的性能

針對目前接手的web前端的性能，一時間不知道從什麼地方入手，而後通過查找資料，發現其實仍是蠻簡單的。

前端性能測試對象：

HTML、CSS、JS、AJAX等前端技術開發的Web頁面

影響用戶瀏覽網頁速度的因素：

服務端數據返回、網絡傳輸、頁面渲染等

前端性能測試目的：

計算出包含頁面渲染、網絡傳輸以及服務器端解析等綜合因素在內的加載時間等指標，對該頁面性能進行評估分析，找出影響性能的主要因素和瓶頸，並在此結果的基礎上，給出必定的優化建議和解決方案，從而提高用戶體驗

頁面結構分析工具： YSlow/PageSpeed

經過網頁JS/CSS/Image數及請求數量、請求類型、緩存等方面的靜態分析

多用於本地開發或者本地測試

真實用戶瀏覽頁面分析：OneAPM Browser Insight/DynaTrace Ajax Edition

經過真實瀏覽器訪問頁面，收集頁面的w3c 標準信息，ajax，網絡等數據等終端分析

多用於內網多終端系統檢測和web網站檢測

靜態分析 –-Yslow 業界俗稱---雅虎評估網站性能的23條軍規

經過給瀏覽器安裝 Yslow 插件後在使用Yslow後，在控制面板裏就會給你評分提示，和改進建議。

Grade(等級視圖)—Yslow

Yslow給出的網站性能評分，從F~A，A是最好的，經過測試來看，網站有4處得分最低，例如圖2中的最低分提示：個人HTTP請求太多。其中應用了14個外部js、3個CSS文件（以前我已從6個合併爲3個）、14個CSS背景圖片。

Yslow的建議是讓我合併這些，至於合併CSS引用圖片我在「提升網站打開速度的7大祕籍」中介紹過。

Components（組件視圖）—Yslow

經過Components考驗查看網頁各個元素佔用的空間大小，例如我某個頁面，有236個images（圖片），佔用了489.2K，經過詳細查看，發現來自gravatar頭像的引用圖片很是大，在加上評論量就大，每一個頭像就佔用幾K，幾百個就佔用了整個網頁50%的大小，並且圖片仍是引用的，加載就更慢。

因此，得出的結論是：gravatar雖然加強了互動性和個性，但也結結實實影響了網站速度。

Statistics（統計信息視圖）—Yslow

終端分析 –-OneAPM Browser Insight/業界俗稱---RUM rum real user monitoring

經過各類語言探針給頁面自動插入一行js代碼，在瀏覽器瀏覽的時候收集頁面加載時間和網絡信息，多用於內網多終端系統檢測和web網站

主要性能指標 -白屏時間、首屏時間、html5啓動時間、網頁加載就緒時間

以博客園博客爲例

主要指標

頁面加載的性能區間 錯誤信息  等

ajax