某網(wǎng)站前端頁面性能測試

1頁面性能測試概述

頁面性能測試則是針對于頁面性能優(yōu)化而開展的一種性能測試，目的是對Web系統(tǒng)的頁面進行測試以確認系統(tǒng)頁面是否會影響系統(tǒng)的性能并為頁面的優(yōu)化提供依據(jù)與建議，最終提升系統(tǒng)的整體性能表現(xiàn)，提高用戶體驗滿意度。他的關(guān)注點是在與頁面，不在于后端。有別于我們通常說的性能測試。

相對于C/S架構(gòu)的應(yīng)用系統(tǒng)，Web應(yīng)用系統(tǒng)所有數(shù)據(jù)都需要從服務(wù)器端下載，雖然瀏覽器有緩存機制，但客戶每次訪問仍然需要下載大量

很多人覺得如果有大量服務(wù)器做支撐，就不會存在性能問題，其實是不對的，當硬件達到一定水準后提升硬件已無作用。舉個例子，當一個頁面中包含幾百個請求，頁面中沒有經(jīng)過優(yōu)化的javaScript文件、CSS 文件與圖片件大小達到10MB，即使當前只有一個用戶在訪問該系統(tǒng)，頁面的訪問速度也會慢得驚人，縱使增加再多的服務(wù)器也不見得會有明顯的性能提升。

2提高頁面性能的一般方法

2.1減少請求和響應(yīng)的往返次數(shù)

HTTP緩存是最好的減少客戶端服務(wù)器端往返次數(shù)的辦法。緩存提供了提供一種機制來保證客戶端或者代理能夠存儲一些東西，而這些東西將會在稍后的HTTP 響應(yīng)中用到的。（即第一次請求了，到了客戶端，緩存起來，下次如果頁面還要這個JS文件或者CSS文件啥的，就不要到服務(wù)器端去取下來了，但是還是要去服務(wù)器上去訪問一次，因為請求要對比ETag值。

2.2減少請求和響應(yīng)的往返字節(jié)大小

l 使用更少的圖畫

l 將所有的CSS濃縮到一個CSS文件中

l 將所有的腳本濃縮到一個JS文件中

l 簡化你的頁時間

l 使用HTTP壓縮

PS：貌似太理想化了。。。。。

2.3太多了yahoo的22條規(guī)則，值的參考

3頁面性能測試的環(huán)境搭建

環(huán)境為：Yslow+ShowSlow+WAMP（VertrigoServ）

步驟如下：

n 創(chuàng)建一個db為showslow

n 導(dǎo)入下載的ShowSlow中的tables.sql

n 把下載的ShowSlow放到www目錄下，修改config.php中的

$db = 'showslow';

$user = 'root';

$pass = '123456'; //密碼根據(jù)你的情況修改。

n 打開ff配置about:config

過濾器：yslow

修改下面三項內(nèi)容：

extensions.yslow.beaconUrl=

http://localhost.com/showslow/beacon/yslow/

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

n 重新啟動瀏覽器：在瀏覽器內(nèi)輸入http://localhost/showslow/

n 如果頁面上沒有任何錯誤提示的話，恭喜你，你太幸運了。

n 啟動ff，進入ShowSlow，然后在打開要測試的頁面啟動yslow

4測試范圍

對線上的部分頁面進行測試，如下：

www側(cè)：首頁、單品頁、我的訂單頁

seller側(cè)：訂單管理

5 測試結(jié)果與分析

5.1 www側(cè)：首頁

測試時間：2011-9-30

地點：公司

5.1.1 減少http request

8個外部js

4個外部css

10個外部background images

不知是否可以使用CSS Sprites整合圖片、合并CSS文件、合并JS文件。

5.1.2 加入CDN

html.xxx.com

www.xxx.com

log.xxx.com

img.xxx.com

5.1.3 設(shè)置過期的http header

可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中，不過也有一定的風(fēng)險，畢竟js和css有一定的邏輯

具體列表見 首頁-沒有設(shè)置過期的http header的東東.txt

5.1.4 對頁面組件進行g(shù)zip壓縮

首頁中有以下東東，不知是否可以進行壓縮處理

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/index0902.css

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

PS：這個是一個在線的壓縮工具，個人感覺不錯，能給出比較好的壓縮信息與參數(shù)，方便調(diào)試，地址：http://tool.lanrentuku.com/csszip/

5.1.5 js的位置

為了實現(xiàn)最大的下載并行，頁面加載初期做的事，最好只有HTML的下載，CSS的下載,JS的下載等，下載完成后再去實現(xiàn)頁面渲染，JS腳本運行等。所以一般的處理辦法還是頁面頭部引入JS鏈接，頁面底部執(zhí)行JS腳本程序。

下面的鏈接，我試了下，除了第一個，剩余的都可以放到底部

· http://www.xx.com/js/jquery.js

· http://html.xx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

5.1.6 設(shè)置ajax緩存

雖然ajax是異步的，但不能保證不會等待異步的這段時間，不過為避免重復(fù)的ajax請求，加上緩存也是件好事吧J

首頁測試的時候只有一個地址，如下

http://www.xxx.com/ajax/loginInfoAjax.jhtml?jsoncallback=jsonp1317353338559

我看這個貌似是會員的一些信息，包括購物車中商品數(shù)，用戶名、狀態(tài)等

5.1.7 減少DOM元素的數(shù)量

首頁中差不多有1584個DOM elements

是否可以優(yōu)化下首頁結(jié)構(gòu)，畢竟首頁是門簾，用戶體驗也很重要的!

5.1.8 盡量使用與域名無關(guān)的cookie

所謂的 cookie-free domains 就是在瀏覽器發(fā)送靜態(tài)內(nèi)容的請求時不會發(fā)送cookies 的域名。首頁中有如下：

· http://www.xxx.com/js/100023.js

· http://html.xxx.com/html/images/header0811/bor.gif

· http://html.xxx.com/html/images/header0811/menu.png

· http://html.xxx.com/html/index0601/indexbg.png

· http://html.xxx.com/html/index0601/boder.gif

· http://html.xxx.com/html/index0601/h3bg.gif

· http://html.xxx.com/html/index0601/floorico.png

· http://html.xxx.com/html/index0601/botdy.gif

我看這里面有些圖片一般是不會改變的，是否考慮放到靜態(tài)服務(wù)器上，以減少cookie的反復(fù)傳輸對主域名的影響。

5.1.9 簡單的統(tǒng)計數(shù)據(jù)

5.2 www側(cè)：單品頁

測試單品頁為：

http://www.xxx.com/goods/3B2BDB2CF26A4641_453v4563.html

測試時間：2011-9-30

地點：公司

5.2.1減少http request

有21個外部js

6個外部css

12個外部background images

不知是否可以使用CSS Sprites整合圖片、合并CSS文件、合并JS文件不知是否可以使用CSS Sprites整合圖片、合并CSS文件、合并JS文件

5.2.2設(shè)置過期的http header

可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中，不過也有一定的風(fēng)險，畢竟js和css有一定的邏輯。

詳細的URL見 單品頁-沒有設(shè)置過期的http header.txt

5.2.3對頁面組件進行g(shù)zip壓縮

單品頁中有以下東東，不知是否可以進行壓縮處理

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/details0629.css

· http://html.xxx.com/im/css/webIM.css

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

· http://html.xxx.com/html/js/ajax.js

· http://im.xxx.com:9090/cdmocsc/commons/connection.jsp?...

· http://html.xxx.com/im/cdjs/jquery-1.4.2.min.js

PS：這個是一個在線的壓縮工具，個人感覺不錯，能給出比較好的壓縮信息與參數(shù)，方便調(diào)試，地址：http://tool.lanrentuku.com/csszip/

5.2.4 js的位置

單品頁中太多的js放到了頭部

· http://www.xxx.com/js/jquery.js

· http://www.xxx.com/js/jquery.cookie.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://www.xxx.com/js/qt.js?...

· http://www.xxx.com/js/pageutil_20110706.js

· http://www.xxx.com/js/goodsdetail_20110705.js

· http://www.xxx.com/js/jquery.countdown.1.0.js

· http://www.xxx.com/js/jquery.lazyload.mini.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

大部分的js都可以放到底部，尤其是一些直接寫的function

5.2.5 避免css表達式

http://html.xxx.com/html/css/details0629.css

僅此一個，有時候迫不得已使用，不過還是少用為好，哈哈，這個玩意強大又危險

5.2.6 減少DNS查找

· www.xxx.com: 21 components, 285.7K (88.5K GZip)

· html.xxx.com: 31 components, 428.6K

· log.xxx.com: 1 component, 12.4K (4.1K GZip)

· img.xxx.com: 51 components, 409.2K

· space.feixin.10086.cn: 1 component, 0.0K

· wpa.qq.com: 1 component, 0.0K

· im.xxx.com: 1 component, 2.7K

沒辦法，這個沒法控制的很好，即使是淘寶也一樣，暫且飄過吧~

5.2.7減少DOM元素的數(shù)量

此單品頁中有1243 DOM elements，呃。。。。和首頁快有一拼了。。。。。

5.2.8 簡單的統(tǒng)計數(shù)據(jù)

左側(cè)圖表顯示是頁面元素在空緩存的加載情況，右側(cè)為頁面元素使用緩存后的頁面加載情況

呃。。。這請求數(shù)貌似是比較多，趕上首頁了，嘿嘿