前端性能評價模型自動分析方法研究
1、 引言
隨著網絡化應用的日趨普及,以及WEB系統的開發技術和框架的成熟和完善,使得WEB系統的開發周期越來越短,應用越來越廣泛。根據中國互聯網信息中心(CNNIC)發布的《第27次中國互聯網發展狀況調查統計報告》顯示截至2010年12月,中國的網站數(域名注冊者在中國境內的網站數包含了境內接入和境外接入)已經達到的191萬個。Web系統的頁面數和單個頁面的字節數等互聯網資源數卻又大幅度的增長。對于一個用戶的發起的每次響應多耗費的時間中80%的響應時間消耗在了前端。而且對于提升網站的訪問速度而言,如果通過后端優化將響應速度提升一賠,那么整體的響應時間僅僅只能減少5%到10%;而如果通過優化前端將響應時間減少一半,則整體響應時間至少減少40%到45%。
2、 前端性能評價模型簡介
桑德斯在高性能網站建設指南一書中提出了WEB系統前端優化的一些方法,依據上述方法和分類,中國軟件評測中心的測試工程師提出了WEB系統前端性能評價等級模型。其將前端性能分為三類,分別為服務器文件類、協議類和附加類。并將前端性能的滿足程度分為了四個等級。依據不同的WEB系統的特點,給出了各類WEB系統應達到的優化級別。具體前端性能評價等級模型如下:
表1 前端性能評價等級模型
級別 |
級別名稱 |
詳情 |
第一級 |
無優化級 |
開發完成后沒有任何前端性能優化方面的考慮 |
第二級 |
服務器文件優化級 |
CSS 文件或者代碼至于頂部 |
JavaScript 腳本文件或者代碼至于文件的底部 |
||
CSS 文件或者代碼中無CSS 表達式 |
||
JavaScript 腳本文件或者代碼中無重復腳本 |
||
移除無用的CSS |
||
對JavaScript 腳本進行了精簡 |
||
精簡CSS 腳本 |
||
外鏈JavaScript 腳本并且合并多個javascript 腳本文件 |
||
外鏈CSS 并且合并多個CSS 文件 |
||
應用圖片地圖或者CSS Sprites |
||
第三級 |
協議優化級 |
應用Expires 頭 |
無重定向 |
||
應用GZip 壓縮 |
||
配置ETag |
||
附加項:應用Ajax 緩存 |
||
第四級 |
附加優化級 |
應用CDN |
混淆JavaScript |
||
頁面DNS 查找最小化 |
但是對于一個被評價的WEB系統是否達到了其應有的級別,是通過分析、優化、再分析、再優化的過程實現的,這是一個反復的過程。人工的完成這個過程既費時又費力,因此本文介紹了通過自動化前端測試工具YSlow進行評價,配合結果管理工具ShowSlow自動收集結果,在通過自動化評價工具進行結果分析,自動的分析網站前端是否達到了要求。
3、 前端性能評價模型自動分析方法
3.1 相關工具
YSlow 是有雅虎公司開發的免費前端性能檢測工具。YSlow 通過檢測網頁上的所有組
件,包括JavaScript 動態創建的組件,分析網頁的前端性能。同時,YSlow 依據前端性能的
分析結果提出改進建議。
ShowSlow可以收集YSlow的分析數據,幫助監控各種WEB系統的前端性能,可以實現與YSlow的無縫連接。ShowSlow采用PHP設計,應用了MySQl數據庫,Apache中間件提供服務。 YSlow和ShowSlow可以通過Firefox瀏覽器進行配置,方法如下:
1.打開Firefox輸入:about:config(我保證會很小心的) 2.filter中輸入:yslow 3.修改以下三條數據 extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/ 如果測試和服務器不在同一機器上,請將localhost改成實際地址 extensions.yslow.beaconInfo = grade extensions.yslow.optinBeacon = true |
3.2 自動化等級評價工具
自動化等級評價工具是通過ShowSLow存儲的訪問記錄,獲取結果,通過前面章節中提到的訪問方法分級方法進行評價,自動顯示當前網站說出等級。算法流程如下:
該工具主要是通過讀取ShowSlow的URLS表格,獲取所有被記錄的網站記錄,選取被考察的網站后,會讀取所有對該網站的YSLow的評價記錄,選中一次訪問記錄,通過分析方法依據前端性能評價等級模型顯示選中的記錄的等級。
4、 自動分析方法舉例
4.1 YSLow手動訪問分析結果
打開中國軟件評測中心網站,運行YSlow 軟件結果如下。
應用YSlow 工具,依據前端性能等級評價模型,發現中國軟件評測中心網站沒有完成(圖中標示使部分為優化內容)沒有使用Expires 頭、圖片的壓縮優化、沒有應用CSS Sprites、沒有應用gzip 壓縮、未對CSS 文件精簡、未進行javascript 腳本文件的壓縮,未應用ETags。應用前端性能等級評價模型如下表所示,中國軟件評測中心第二級實現了6項內容的優化,優化率為66.67%達到了第二級服務器端文件優化級。
4.2 自動評價
在通過YSlow評價后,通過自評價工具,可以看到已經評價的網頁,如下圖所示:
點擊率上圖中記錄為1 的,查看歷史評價結果,如下圖所示:
點擊最新一次結果記錄,該工具會自動的顯示當前頁面前端性能等級,并給出為滿足項。