一、頁面性能測試概述

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

二、頁面性能測試必要性

相對于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)性能問題，沒有必要進(jìn)行性能測試，因?yàn)樗麄兛梢再徺I足夠多的服務(wù)器來支撐系統(tǒng)；不少業(yè)界同行也認(rèn)為只要有足夠多的服務(wù)器資源，性能就不會存在問題。其實(shí)不然，他們都只關(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種方式來提升你的web 應(yīng)用程序的速度：

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

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

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

HTTP緩存是最好的減少客戶端服務(wù)器端往返次數(shù)的辦法。緩存提供了提供一種機(jī)制來保證客戶端或者代理能夠存儲一些東西，而這些東西將會在稍后的HTTP 響應(yīng)中用到的。（即第一次請求了，到了客戶端，緩存起來，下次如果頁面還要這個JS文件或者CSS文件啥的，就不要到服務(wù)器端去取下來了，但是還是要去服務(wù)器上去訪問一次，因?yàn)檎埱笠獙Ρ?span lang="EN-US">ETAG值，關(guān)于這個值，我將會在下次翻譯中介紹其作用）這樣，就不用讓文件再次跨越整個網(wǎng)絡(luò)了。

緩存相關(guān)的請求頭

為了提高性能，微軟的IE和其他的web客戶端總是想盡辦法來維持從遠(yuǎn)程服務(wù)器上下載下來的本地的緩存。

當(dāng)客戶端需要一個資源（html,css.js…），他們有3種可能的動作：

1 發(fā)送一個一般的HTTP請求到遠(yuǎn)程服務(wù)器端，請求這個資源。

2 發(fā)送一個有條件的HTTP請求到服務(wù)器，條件就是如果它不同于本地的緩存版本。

3 如果緩存的拷貝可用，就使用本地的緩存資源。

當(dāng)發(fā)送一個請求，客戶也許會使用如下的幾個HEADER

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

1 使用更少的圖畫

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

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

4 簡化你的頁時間

5 使用HTTP壓縮

==========================================================================================================================================

頁面性能測試工具介紹：

第一種是通過HTTP代理的方式來截取客戶與服務(wù)器之間的通訊。

此類的工具非常的多，如：

Charles官網(wǎng)：http://www./

charles界面清爽，采用中國的瓷器為logo，給人的感覺簡潔高雅。而且使用也非常簡單。下載頁面：http://www./download/ 進(jìn)入選擇你適合你的版本，安裝也非常簡單，一路“next”就OK了。

點(diǎn)擊工具欄上的“紅色”按鈕，就自動的記錄你瀏覽器訪問的所有網(wǎng)站。

Fiddler2官網(wǎng)：http://www./fiddler2/

Fiddler2相比Charles功能要更強(qiáng)大一些。當(dāng)然了，如果單單把他們理解成頁面性能測試工具有此片面，尤其Fiddlers2功能強(qiáng)大，當(dāng)然了，我也沒有深究，在此就不過多評論了。