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