一、頁面性能測試概述
頁面性能測試則是針對于頁面性能優(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)檎埱笠獙Ρ菶TAG值，關(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是一個HTTP代理/ HTTP監(jiān)視器/使開發(fā)人員可以查看所有的計(jì)算機(jī)和互聯(lián)網(wǎng)之間的HTTP和SSL/ HTTPS流量的反向代理。這包括請求，響應(yīng)和HTTP標(biāo)頭（其中包含的cookies和緩存信息）。
charles界面清爽，采用中國的瓷器為logo，給人的感覺簡潔高雅。而且使用也非常簡單。進(jìn)入下載頁面，選擇你適合你的版本，安裝也非常簡單，一路“next”就OK了。
點(diǎn)擊工具欄上的“紅色”按鈕，就自動的記錄你瀏覽器訪問的所有網(wǎng)站。
Fiddler是一個Web調(diào)試代理，記錄所有的HTTP（S）之間的計(jì)算機(jī)和互聯(lián)網(wǎng)的交通。提琴手允許您檢查交通，設(shè)置斷點(diǎn)，和“搗鼓”傳入或傳出數(shù)據(jù)。菲德勒包括一個強(qiáng)大的基于事件的腳本子系統(tǒng)，并可以使用任何。NET語言擴(kuò)展。
Fiddler是免費(fèi)軟件，可以調(diào)試，從幾乎任何應(yīng)用程序，支持代理，包括IE瀏覽器，谷歌Chrome，蘋果Safari，Mozilla Firefox中，歌劇，還有數(shù)千交通。您也可以像Windows電話，iPod/ iPad和其他流行的設(shè)備調(diào)試的交通。
Fiddler2相比Charles功能要更強(qiáng)大一些。當(dāng)然了，如果單單把他們理解成頁面性能測試工具有此片面，尤其Fiddlers2功能強(qiáng)大，當(dāng)然了，我也沒有深究，在此就不過多評論了。