某網站前端頁面性能測試

1頁面性能測試概述

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

相對于C/S架構的應用系統，Web應用系統所有數據都需要從服務器端下載，雖然瀏覽器有緩存機制，但客戶每次訪問仍然需要下載大量

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

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

2.1減少請求和響應的往返次數

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

2.2減少請求和響應的往返字節大小

l 使用更少的圖畫

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

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

l 簡化你的頁時間

l 使用HTTP壓縮

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

2.3太多了yahoo的22條規則，值的參考

3頁面性能測試的環境搭建

環境為：Yslow+ShowSlow+WAMP（VertrigoServ）

步驟如下：

n 創建一個db為showslow

n 導入下載的ShowSlow中的tables.sql

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

$db = 'showslow';

$user = 'root';

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

n 打開ff配置about:config

過濾器：yslow

修改下面三項內容：

extensions.yslow.beaconUrl=

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

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

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

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

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

4測試范圍

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

www側：首頁、單品頁、我的訂單頁

seller側：訂單管理

5 測試結果與分析

5.1 www側：首頁

測試時間：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 設置過期的http header

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

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

5.1.4 對頁面組件進行gzip壓縮

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

· 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：這個是一個在線的壓縮工具，個人感覺不錯，能給出比較好的壓縮信息與參數，方便調試，地址：http://tool.lanrentuku.com/csszip/

5.1.5 js的位置

為了實現最大的下載并行，頁面加載初期做的事，最好只有HTML的下載，CSS的下載,JS的下載等，下載完成后再去實現頁面渲染，JS腳本運行等。所以一般的處理辦法還是頁面頭部引入JS鏈接，頁面底部執行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 設置ajax緩存

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

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

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

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

5.1.7 減少DOM元素的數量

首頁中差不多有1584個DOM elements

是否可以優化下首頁結構，畢竟首頁是門簾，用戶體驗也很重要的!

5.1.8 盡量使用與域名無關的cookie

所謂的 cookie-free domains 就是在瀏覽器發送靜態內容的請求時不會發送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

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

5.1.9 簡單的統計數據

5.2 www側：單品頁

測試單品頁為：

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設置過期的http header

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

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

5.2.3對頁面組件進行gzip壓縮

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

· 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：這個是一個在線的壓縮工具，個人感覺不錯，能給出比較好的壓縮信息與參數，方便調試，地址：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元素的數量

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

5.2.8 簡單的統計數據

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

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