天天看點

性能測試知多少---了解前端性能

  我的上一篇博文中講到了響應時間,我們在做性能測試時,能過工具可以屏蔽用戶端呈現時間,通過區域網路的高寬帶可以忽略數

據傳輸速度的障礙。這并不是說他們不會對系統造成性能影響。相反,從使用者的感受來看,雖然傳輸速度受使用者帶寬的限制。但我們可以通過很多技術來使使用者想要

看到的頁面更快的顯示。這就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 、

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

  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下載下傳安裝重新開機浏覽器。

同樣對百度首頁的通路:

性能測試知多少---了解前端性能

從上面圖中看到請求的大小為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端的性能進行了解。

  那麼前端性能這麼見效,為什麼還要去做後端性能測試呢?因為他們關注點不同,前端性能關注單個使用者的感受。後端性能關注是更多使用者通路系統時,伺服器能更穩定、更快的處理使用者發來的請求。一個強大的背景是前台的基礎。

繼續閱讀