Web 系統(tǒng)頁面性能測試報告書測試部門：軟件研發(fā)部門測試人員 ； 王園兆1 ,前言：隨著Web 應(yīng)用系統(tǒng)的功能越來越強(qiáng)大，系統(tǒng)的界面越來越炫，用戶不再懷念C/S架構(gòu)系統(tǒng)的強(qiáng)

Web 系統(tǒng)頁面性能測試報告書

測試部門：軟件研發(fā)部門

測試人員 ； 王園兆

1

前言：

隨著Web 應(yīng)用系統(tǒng)的功能越來越強(qiáng)大，系統(tǒng)的界面越來越炫，用戶不再懷念C/S架構(gòu)系統(tǒng)的強(qiáng)大功能與華麗界面，B/S架構(gòu)也成為系統(tǒng)開發(fā)者的首選。但是，由于系統(tǒng)開發(fā)商的良莠不齊以及系統(tǒng)的服務(wù)器、網(wǎng)絡(luò)等資源的有限性，Web 應(yīng)用系統(tǒng)的性能問題仍然比較突出，對應(yīng)用系統(tǒng)進(jìn)行性能測試也顯得尤為重要。然而，提起Web 應(yīng)用系統(tǒng)的性能測試，大家首先想到的是對應(yīng)用系統(tǒng)后臺的應(yīng)用服務(wù)器、數(shù)據(jù)庫性能測試，往往忽略了系統(tǒng)前端的頁面性能測試。其實，頁面的性能優(yōu)化對于整個系統(tǒng)的性能提升起著非常重要的作用，特別是對并發(fā)訪問量較大的事務(wù)處理型應(yīng)用系統(tǒng)。

1. 不可或缺的頁面性能測試

1.1. 頁面性能測試概述

Web 應(yīng)用系統(tǒng)可簡單劃分為系統(tǒng)前端與后臺，系統(tǒng)后臺一般包括包括應(yīng)用服務(wù)器、中間件、數(shù)據(jù)庫等，用來作業(yè)務(wù)的邏輯處理與數(shù)據(jù)存儲；系統(tǒng)的前臺指客戶端即瀏覽器，用來進(jìn)行頁面的展示。Web 應(yīng)用系統(tǒng)的性能測試通常是指對系統(tǒng)后臺進(jìn)行并發(fā)壓力測試，從而定位系統(tǒng)后臺的性能瓶頸，主要集中于對系統(tǒng)業(yè)務(wù)邏輯處理的性能分析上，而對頁面的性能分析涉及較少。

頁面性能測試則是針對于頁面性能優(yōu)化而開展的一種性能測試，目的是對Web 系統(tǒng)的頁面進(jìn)行測試以確認(rèn)系統(tǒng)頁面是否會影響系統(tǒng)的性能并為頁面的優(yōu)化提供依據(jù)與建議，最終提升系統(tǒng)的整體性能表現(xiàn)，提高用戶體驗滿意度?？梢姡琖eb 系統(tǒng)頁面性能測試是相對Web 系統(tǒng)后臺測試的另外一種性能測試，是Web 系統(tǒng)性能測試的一個重要部分。

1.2. 頁面性能測試的必要性

相對于C/S架構(gòu)的應(yīng)用系統(tǒng)，Web 應(yīng)用系統(tǒng)所有數(shù)據(jù)都需要從服務(wù)器端下載，雖然瀏覽器有緩存機(jī)制，但客戶每次訪問仍然需要下載大量的數(shù)據(jù)。特別是用戶對系統(tǒng)要求越來越高，除了要求功能完備，對界面的美觀、易用性也提出了更高的要求，越炫的頁面也就意味著頁面中要包含更多的腳本、樣式表、圖片和Flash ，頁面的數(shù)據(jù)量也就越大，這對Web 系統(tǒng)的性能提出了極大的挑戰(zhàn)。

曾經(jīng)有個在線打印服務(wù)的應(yīng)用提供商說他們的系統(tǒng)不需要關(guān)注系統(tǒng)性能問題，沒有必要 2

進(jìn)行性能測試，因為他們可以購買足夠多的服務(wù)器來支撐系統(tǒng)；不少業(yè)界同行也認(rèn)為只要有足夠多的服務(wù)器資源，性能就不會存在問題。其實不然，他們都只關(guān)注到了應(yīng)用系統(tǒng)的后臺性能表現(xiàn)，而忽略了頁面對系統(tǒng)整體性能的影響。舉個例子，當(dāng)一個頁面中包含幾百個請求，頁面中沒有經(jīng)過優(yōu)化的javaScript 文件、CSS 文件與圖片件大小達(dá)到10MB ，即使當(dāng)前只有一個用戶在訪問該系統(tǒng)，頁面的訪問速度也會慢得驚人，縱使增加再多的服務(wù)器也不見得會有明顯的性能提升。

可見，對Web 應(yīng)用系統(tǒng)的頁面進(jìn)行性能測試和優(yōu)化是非常有必要的。只有通過對頁面的性能測試，發(fā)現(xiàn)頁面存在的性能問題并根據(jù)性能測試結(jié)果進(jìn)行頁面優(yōu)化以提升頁面的加載性能，從而提升系統(tǒng)的整體性能。在應(yīng)用系統(tǒng)高并發(fā)訪問時，更能體現(xiàn)出Web 頁面優(yōu)化后所帶來的系統(tǒng)整體性能提升效果。

2. 頁面性能測試的方法

2.1. 頁面性能測試的內(nèi)容

每個Web 系統(tǒng)的頁面的組成部分大部相同，一般都包含html 文件、javaScript 文件、層疊樣式表、圖片等文件，而影響系統(tǒng)頁面性能的正是這些文件或頁面元素的編寫不恰當(dāng)、屬性設(shè)置不正確、或使用方法有誤造成的。因此，系統(tǒng)頁面性能測試的內(nèi)容與系統(tǒng)后臺并發(fā)壓力測試不一樣，頁面性能測試不是在多用戶并發(fā)情況下去發(fā)現(xiàn)并定位系統(tǒng)的性能瓶頸而是檢查頁面各文件或元素是否以最優(yōu)的方式編寫。

各個開發(fā)商都有自己的一套標(biāo)準(zhǔn)去開發(fā)Web 頁面，業(yè)界也有不少頁面優(yōu)化的方法如Yahoo 的34條“黃金守則”與Google 的頁面優(yōu)化建議等。根據(jù)業(yè)界Web 頁面優(yōu)化原則總結(jié)歸納出Web 系統(tǒng)頁面性能測試內(nèi)容：

1) 檢查頁面各個文件或元素是否合理使用緩存；

2) 檢查頁面的http 請求數(shù)是否已精簡至最少；

3) 檢查頁面是否存在錯誤請求與重定向請求；

4) 檢查頁面的javaScript 文件、層疊樣式表、圖片等文件是否通過合并、壓縮等方式

進(jìn)行優(yōu)化；

5) 檢查頁面的DOM 元素是否都是必要的，盡量減少DOM 元素數(shù)量；

6) 檢查頁面元素屬性是否正確設(shè)置。

3 [1]

以上則是 Web系統(tǒng)頁面性能測試的大概內(nèi)容，在實際測試過程中可以根據(jù)項目的實際情況參照其它頁面優(yōu)化建議對性能測試項目進(jìn)行增刪，目的是盡可能找出影響頁面性能的因素，對頁面進(jìn)行優(yōu)化以提升系統(tǒng)整體性能。

2.2. 頁面性能測試的方法

一個業(yè)務(wù)處理型的Web 系統(tǒng)所包含的頁面往往是成百上千個，如果對每個頁面都進(jìn)行手工檢查驗證的話，那么對一個系統(tǒng)進(jìn)行頁面性能測試的工作量將是相當(dāng)驚人的。為了對系統(tǒng)頁面進(jìn)行快速測試，推薦使用自動化工具進(jìn)行測試，以提高測試效率與準(zhǔn)確率。

目前對Web 頁面進(jìn)行性能測試的工具比較流行的有HttpWatch 、IBM 的Page Detailer Pro 、Google 的PageSpeed 與Yahoo 的Yslow ，在實際項目測試中可以根據(jù)項目的實際情況采用合適的輔助工具進(jìn)行頁面性能測試以提高測試效率。

2.3. 選擇Yslow 的理由

YSlow 是Yahoo 發(fā)布的一款基于FireFox 的插件。 YSlow 可以對網(wǎng)站的頁面進(jìn)行分析，并告訴你為了提高網(wǎng)站性能，如何基于某些規(guī)則而進(jìn)行優(yōu)化。 YSlow 可以分析任何網(wǎng)站，并為每一個規(guī)則產(chǎn)生一個整體報告，如果頁面可以進(jìn)行優(yōu)化，則YSlow 會列出具體的修改意見。

Yslow-23條黃金規(guī)則 1. 減少HTTP 請求次數(shù)

合并圖片、CSS 、JS ，改進(jìn)首次訪問用戶等待時間。

2. 使用CDN

就近緩存==>智能路由==>負(fù)載均衡==>WSA全站動態(tài)加速

3. 避免空的src 和href

當(dāng)link 標(biāo)簽的href 屬性為空、script 標(biāo)簽的src 屬性為空的時候，瀏覽器渲染的時候會把當(dāng)前頁面的URL 作為它們的屬性值，從而把頁面的內(nèi)容加載進(jìn)來作為它們的值。測試

4. 為文件頭指定Expires

使內(nèi)容具有緩存性。避免了接下來的頁面訪問中不必要的HTTP 請求。

5. 使用gzip 壓縮內(nèi)容

壓縮任何一個文本類型的響應(yīng)，包括XML 和JSON ，都是值得的。舊文章

4

6. 把CSS 放到頂部

7. 把JS 放到底部

防止js 加載對之后資源造成阻塞。

8. 避免使用CSS 表達(dá)式

9. 將CSS 和JS 放到外部文件中

目的是緩存，但有時候為了減少請求，也會直接寫到頁面里，需根據(jù)PV 和IP 的比例權(quán)衡。

10. 權(quán)衡DNS 查找次數(shù)

減少主機(jī)名可以節(jié)省響應(yīng)時間。但同時，需要注意，減少主機(jī)會減少頁面中并行下載的數(shù)量。

IE 瀏覽器在同一時刻只能從同一域名下載兩個文件。當(dāng)在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N 個二級域名來放圖片。

11. 精簡CSS 和JS

12. 避免跳轉(zhuǎn)

同域：注意避免反斜杠 “/” 的跳轉(zhuǎn)；

跨域：使用Alias 或者mod_rewirte建立CNAME （保存域名與域名之間關(guān)系的DNS 記錄）

13. 刪除重復(fù)的JS 和CSS

重復(fù)調(diào)用腳本，除了增加額外的HTTP 請求外，多次運(yùn)算也會浪費(fèi)時間。在IE 和Firefox 中不管腳本是否可緩存，它們都存在重復(fù)運(yùn)算JavaScript 的問題。

14. 配置ETags

它用來判斷瀏覽器緩存里的元素是否和原來服務(wù)器上的一致。比last-modified date 更具有彈性，例如某個文件在1秒內(nèi)修改了10次，Etag 可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù)) ，MTime(修改時間) 和Size 來精準(zhǔn)的進(jìn)行判斷，避開UNIX 記錄MTime 只能精確到秒的問題。 服務(wù)器集群使用，可取后兩個參數(shù)。使用ETags 減少Web 應(yīng)用帶寬和負(fù)載

15. 可緩存的AJAX

“異步”并不意味著“即時”：Ajax 并不能保證用戶不會在等待異步的JavaScript 和XML 響應(yīng)上花費(fèi)時間。

16. 使用GET 來完成AJAX 請求

當(dāng)使用XMLHttpRequest 時，瀏覽器中的POST 方法是一個“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET 獲取數(shù)據(jù)時更加有意義。

17. 減少DOM 元素數(shù)量

是否存在一個是更貼切的標(biāo)簽可以使用？人生不僅僅是DIV CSS

18. 避免404

有些站點(diǎn)把404錯誤響應(yīng)頁面改為“你是不是要找***”，這雖然改進(jìn)了用戶體驗但是同樣也會浪費(fèi)服務(wù)器資源（如數(shù)據(jù)庫等）。最糟糕的情況是指向外部 JavaScript的鏈接出現(xiàn)問題并返回404代碼。首先，這種加載會破壞并行加載；其次瀏覽器會把試圖在返 5

回的404響應(yīng)內(nèi)容中找到可能有用的部分當(dāng)作JavaScript 代碼來執(zhí)行。

19. 減少Cookie 的大小

20. 使用無cookie 的域

比如圖片 CSS 等，Yahoo! 的靜態(tài)文件都在主域名以外，客戶端請求靜態(tài)文件的時候，減少了 Cookie 的反復(fù)傳輸對主域名的影響。

21. 不要使用濾鏡

png24的在IE6半透明那種東西，別亂使，淡定的切成PNG8 jpg

22. 不要在HTML 中縮放圖片

23. 縮小favicon.ico 并緩存

3. 測試實例

本文將參考以上頁面性能測試的內(nèi)容與方法對一個實際的Web 系統(tǒng)進(jìn)行頁面性能測試，最后得出頁面性能情況并指出頁面需要進(jìn)行優(yōu)化的地方并提出優(yōu)化建議。本測試案例將采用Yahoo 的Yslow 作為頁面性能測試自動化工具，并使用showSlow 收集分析性能測試結(jié)果。

3.1. 測試環(huán)境搭建

3.1.1. 搭建本地showSlow 平臺

showSlow 平臺用來收集頁面性能測試工具Yslow 的測試結(jié)果，并對測試結(jié)果進(jìn)行分析展示?；ヂ?lián)網(wǎng)上有一個在線的showSlow 平臺，免費(fèi)提供Yslow 的測試結(jié)果收集與展示?？紤]到企業(yè)的某些系統(tǒng)可能存在商業(yè)機(jī)密，showSlow 開源網(wǎng)站提供源碼允許用戶在本地搭建一個平臺來收集YSlow 的信息。在本案例中，在本地搭建showSlow 平臺收集分析性能測試結(jié)果，步驟如下：

1) showSlow 環(huán)境平臺采用Apache PHP Mysql，所以必須先搭建好Apache PHP Mysql

的環(huán)境，如無相關(guān)經(jīng)驗可使用AppServ 軟件進(jìn)行一體化安裝，可快速搭建好環(huán)境；

2) 下載showSlow 并部署至Apache, 將showSlow 解壓文件置Apache 的WWW 文件夾下即

可。showSlow 下載地址：http://code.google.com/p/showslow/downloads/list 。

3) 創(chuàng)建showSlow 數(shù)據(jù)庫，并通過位于ShowSlow 文件夾的tables.sql 建立相應(yīng)的數(shù)據(jù)

庫表；

6

4) 配置showSlow 平臺，將showSlow 文件夾下的config.sample.php 重命名為

config.php, 并根據(jù)實際情況修改文件中$showslow_base、$db、$user與$pass的值；

5) 至此，showSlow 平臺搭建完畢。重啟apache 服務(wù)器以讓showSlow 平臺的配置生效，

成功重啟后，可嘗試訪問http://localhost/showslow/以確認(rèn)showSlow 平臺是否搭建成功。

3.1.2. 安裝配置Yslow

Yslow 是Yahoo 公司的一個用于分析頁面（基于Yahoo 14條評分原則）的工具，自動檢測已裝載的頁面是否已按其14條評分細(xì)則所開發(fā)，然后給出相應(yīng)得分與頁面的詳細(xì)情況。Yslow 是一個Firefox 瀏覽器的一個插件，安裝、配置與使用都非常便捷，步驟如下：

1) 若沒有Firefox 瀏覽器，下載安裝Firefox 。下載地址：[2]

2) 由于Yslow 運(yùn)行于Firefox 瀏覽器的插件Firebug 上，必須下載安裝Firebug 。下

載地址：https://addons.mozilla.org/zh-CN/firefox/。

3) 下載安裝Firefox 瀏覽器插件Yslow ，下載地址：https://addons.mozilla.org/zh-CN/firefox/。

4) 配置Yslow, 將Yslow 收集的結(jié)果發(fā)送至本地showSlow 平臺，步驟如下：

A. 打開Firefox 瀏覽器，并在地址欄輸入： about:config；

B. 確認(rèn)警告信息后進(jìn)行配置頁面，在過濾器輸入框中輸入yslow 以查找yslow 相

關(guān)配置項；

C. 將如下配置項目設(shè)置如下值：

extensions.yslow.beaconUrl =http://--showSlow地址--/showslow/beacon/yslow/

extensions.yslow.beaconInfo =grade

extensions.yslow.optinBeacon =true

5) 重啟Firefox 瀏覽器即完成Yslow 的安裝配置。

至此，頁面性能測試自動化工具Yslow 與收集分析性能測試結(jié)果的工具showSlow 均已安裝配置完成，完成測試環(huán)境的搭建工作。

7

3.2. 測試實施

使用Yslow 進(jìn)行頁面性能測試的實施工作比較簡單，只需打開瀏覽器并導(dǎo)航至相應(yīng)的頁面，然后運(yùn)行Yslow 即可。在本測試案例中的測試系統(tǒng)首頁訪問特別慢，為確認(rèn)其頁面性能狀況是否良好，對其首頁進(jìn)行頁面性能測試，步驟如下：

1) 打開Firefox 瀏覽器，并導(dǎo)航于需要進(jìn)行頁面性能測試的系統(tǒng)

（http://localhost:8001/index.html?p_win=home）；

2) 打開Firefox 瀏覽器插件Firebug ；

3) 在Firebug 窗口，運(yùn)行Yslow ；

4) 在Yslow 窗口即可見當(dāng)前頁面性能測試結(jié)果，并將測試結(jié)果發(fā)送至本地showSlow 平

臺；

5) 如需要繼續(xù)測試其它頁面，打開相應(yīng)頁面再運(yùn)行Yslow 即可；

6) 訪問本地showslow 平臺，查看分析所有頁面的性能測試結(jié)果。

3.3. 測試結(jié)果分析

在本測試案例中僅對測試系統(tǒng)首頁的頁面性能測試結(jié)果進(jìn)行分析。從showslow 平臺對此系統(tǒng)首頁的分析結(jié)果來看，果不其然，頁面性能狀況不太良好。頁面全部加載完成需要0.986秒，頁面整體得分僅為64分（總分100分），圖3.1

為頁面整體得分。

圖3.1頁面整體得分

從頁面整體得分可以看出系統(tǒng)首頁的頁面性能情況不是很理想，現(xiàn)在對頁面的各個測試項的情況進(jìn)行分析，圖3.2為各個測試項的得分情況。

8

圖3.2各個測試項的得分

1) Make fewer HTTP requests測試點(diǎn)分?jǐn)?shù)為1，原因是頁面中的http 請求數(shù)過多。根據(jù)

yslow 分析其中69個請求可以嘗試整合成3個請求：頁面中的8個javaScript 文件請求可以嘗試整合成一個請求；3個樣式表文件請求可以嘗試整合成一個請求；52個背景圖片請求可以嘗試整合成一個請求。據(jù)權(quán)威統(tǒng)計，HTTP 請求在無緩存情況下占去了 40 到 60 的響應(yīng)時間，所以盡量減少http 請求是頁面性能優(yōu)化工作的第一步。

2) Add Expires headers測試點(diǎn)分?jǐn)?shù)為0，原因是頁面中的250個靜態(tài)組件均沒有設(shè)置緩

存，造成每次訪問該頁面時均需要重新向服務(wù)器請求并下載至瀏覽器。根據(jù)Yslow 分析，此頁面沒有設(shè)置緩存時，文件總體大小為4385.5KB ，合理設(shè)置緩存后僅為

304.2KB ，這對頁面性能提升是相當(dāng)可觀的。為頁面文件設(shè)置緩存，可以減少 HTTP 請求的大小和次數(shù)并大大減少數(shù)據(jù)的網(wǎng)絡(luò)傳輸量以加快頁面訪問速度。

3) Compress components with gzip測試點(diǎn)分?jǐn)?shù)為0，原因是頁面中的44個文本文件均

沒有進(jìn)行壓縮。根據(jù)Yslow 分析，如果頁面文件使用Gzip 進(jìn)行壓縮，大概可以減少 70 的響應(yīng)規(guī)模。

上文對系統(tǒng)首頁的頁面比較突出的性能問題作了詳細(xì)分析，從測試情況來看，該系統(tǒng)首頁的性能情況非常糟糕，對系統(tǒng)的整體性能影響很大。系統(tǒng)首頁的訪問并不需要作大量的業(yè)務(wù)邏輯運(yùn)算，大部分時間都消耗在http 請求響應(yīng)與網(wǎng)絡(luò)傳輸過程中。訪問一個大小為1.37MB ，共有438個請求和2425個DOM 元素的頁面，響應(yīng)時間為0.986秒?？梢姡瑢撁孢M(jìn)行性能測試與頁面優(yōu)化是非常有必要的，對系統(tǒng)的整體性能提升有著不可替代的作用。

9

4. 報告總結(jié)

隨著用戶要求對Web 系統(tǒng)的功能更加強(qiáng)大、界面更加精美，Web 系統(tǒng)的頁面也越來越復(fù)雜，頁面也就越來越容易成為Web 系統(tǒng)的性能瓶頸。所以，非常有必要對Web 系統(tǒng)進(jìn)行頁面性能測試，并根據(jù)性能測試結(jié)果進(jìn)行頁面性能優(yōu)化，以提升系統(tǒng)的整體性能表現(xiàn)。

對于頁面性能測試的方法，推薦使用測試工具以提高測試效率與準(zhǔn)確率。本測試案例中的Yslow showslow也是一個值得推薦的測試框架，此框架也可以進(jìn)一步進(jìn)行擴(kuò)展，采用QTP 或 Selenium 等功能自動化測試工具進(jìn)行頁面自動導(dǎo)航瀏覽，并設(shè)置Yslow 在加載完頁面后自動運(yùn)行，這樣即可實現(xiàn)頁面性能測試的完全自動化。

參考文獻(xiàn)：

[1] 張克東. 軟件工程與軟件測試自動化教程. 北京:[M].2002-2-1

[2] 網(wǎng)站頁面性能優(yōu)化的34條黃金守則 http://www.cnblogs.com 2010

10