性能測試知多少---了解前端性能  《轉載》

我的上一篇博文中講到了響應時間，我們在做性能測試時，能過工具可以屏蔽客戶端呈現時間，通過局域網的高寬帶可以忽略數據傳輸速度的障礙。這并不是說他們不會對系統造成性能影響。相反，從用戶的感受來看，雖然傳輸速度受用戶帶寬的限制。但我們可以通過很多技術來使用戶想要看到的頁面更快的顯示。這就web是前端性能。

　　如果考慮到web應用本身的特性，響應時間的構成應該會更加復雜。

　　Web應用的基礎是超文本傳輸協議（HTTP）和超文本標記語言（HTML），HTTP協議本身是一種面向非連接的協議，HTML語言則是一種用于制作超文本文檔資料的簡單標記語言。

　　對于一個頁面而言，“請求”和“返回數據”都可能是多次發生的。這個我在《在做性能測試之前需要知道什么》一文中舉了一個簡單的例子來講解。由于HTTP對瀏覽器下載資源并發請求數量、Cache等方面都進行定義和限制，以及瀏覽器對于HTML的處理過程。完全可以說，用戶所以感受的響應時間中的相當大的一部分并不完全取決于應用的后臺處理所需要的時間，而取決于web應用的前端。在yahoo中，到少50個團隊通過純粹的前端性能相關的技巧，將最終用戶的響應時間減少了25%以上。

　　HTTP是一個屬于應用層的面向對象的協議，用于傳送WWW方式的數據，采用請求\響應模型，客戶端向服務器發送一個請求，請求頭包含請求的方法、URI、協議版本，以及包含請求修飾符、客戶信息和內容的類似于HTML的消息結構。服務器以一個狀態行作為響應，響應的內容包括消息協議的版本，成功或者錯誤編碼加上包含服務器信息，實體元信息以及可能的實體內容。

　　HTML是一種用于制作超文本文檔資料的簡單標記語言，用HTML編寫的超文本文檔能夠獨立于各種操作系統平臺。從誕生開始，HTML語言就一直被用于描述web頁面格式設計，使用HTML語言描述的文件需要通過WWW瀏覽器顯示效果。

　　用于查看前端性能工具太多的。

　　嵌入瀏覽器的有 yslow 、page speed、httpwatch

　　獨立界面的有 fiddler2、charles 、

　　頁面性能測試之一 ：http://www.51testing.com/html/62/n-249062.html

　　下面用兩種方式來對比較兩種測試響應時間的差別

　　Apache  benchmark 簡稱ab ，是非常有名又小巧的壓力測試工具。

　　下載安裝apache web server 安裝或解壓之后，在bin\目錄下有個ab執行文件。

　　打開運行--cmd 打開命令提示符，定位到bin\目錄下。

　　基本用法：

　　ab  -c  [并發用戶數]  -n  [發送請求數]   [被測試頁面的URL]

　　設置一個用戶一個請求，對百度首頁加壓：http://www.baidu.com/

　　從上表中我們可以看到請求的總字節數為8024字節；響應時間為0.173 秒，也就是下面顯示的173.010毫秒。

Firebug非常有名的debug工具，firefox瀏覽器最得意的集成工具。

　　在firefox瀏覽菜單欄“工具”---添加組件---搜索firebug下載安裝重啟瀏覽器。

　　同樣對百度首頁的訪問：http://www.baidu.com/

　　從上面圖中看到請求的大小為10KB；響應時間1.4秒。清楚的發現這數據可以遠遠大于ab工具所得到的數據。仔細觀察發現，firebug給出的數據，訪問 http://www.baidu.com/ 網址時，客戶端（瀏覽器）和應用之間的數據交互并非1次，而是5次。

　　我們再分析其中的一個請求，firefox給出的的圖形中，有紅色和藍色兩種顏色的線條。藍色表示到此刻發生了DOMContentLoaded事件。紅色線條表示onload事件被觸發。DOMContentLoaded事件W3C推薦的標準事件，它發生在頁面的DOM樹建成時，而onload則發生在頁面所有的資源（圖片文件、CSS文件、js文件等）都被下載完成后。

　　從上圖的右下角，我們會得到兩個響應時間，1.41秒是onload事件被觸發的時間，前面的1.4秒則是頁面的所有請求都返回所需要的總時間。那么哪個時間才是用戶感受到的響應時間呢？準確的說，兩個都不是。用戶的感受是個不確定的狀態，取決于頁面本身的類型以及呈現手段。如果某頁面僅為用戶提供閱讀信息，一旦頁面上開始出現可供閱讀的內容，用戶就開始閱讀了。那么，用戶認為響應時間就是發出請求到頁面上出現可閱讀信息。如果頁面存在大量的交互內容，需要用戶填寫或在頁面上進行拖拽等操作，在這種情況下，只有當頁面的所有元素都被下正確的呈現出來，所有的js文件都已經執行完成后，用戶才會感受到這個頁面已經就緒。

　　Web前端性能的研究并不是為了準確地得到一個響應時間數據，實際上，根據friebug圖表的結果，web性能一部分取決于web服務器和應用服務器（建立連接，下載連接），別一部分取決于瀏覽器的實現機制、web頁面上的js的執行等。取決于web服務器和應用服務器的響應時間與服務器的負載、壓力等相關；而取決于瀏覽器實現機制與js文件執行所需要的時間則幾乎與服務器端的負載和壓力無關。那么web端的響應時間也是總響應時間的一部分，那么有必要web端的性能進行了解。

　　那么前端性能這么見效，為什么還要去做后端性能測試呢？因為他們關注點不同，前端性能關注單個用戶的感受。后端性能關注是更多用戶訪問系統時，服務器能更穩定、更快的處理用戶發來的請求。一個強大的后臺是前臺的基礎。