本文整理於小強測試幫微信公共號

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/h2bg.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 簡單的統計資料

左側圖表顯示是頁面元素在空快取的載入情況，右側為頁面元素使用快取後的頁面載入情況