web前端性能指標、測試方案、優化技巧

轉：https://blog.csdn.net/zimin1985/article/details/46682393

 

相對成熟的後端性能測試工具LoadRunner和開源的jmeter。前端性能一直缺少更多的重視以及測試、優化的文檔支持。這裏簡單介紹下前端性能的意義、關注重點、測試方案和優化技巧

 

一、前段性能的意義

對於訪問一個網站，最花費時間的並非後端應用程序處理以及數據庫等消耗的時間，而是前端花費的時間（包括請求、網絡傳輸、頁面加載、渲染等）。根據web優化的黃金法則：

80%的最終用戶響應時間花在前端程序上，而其大部分時間則花在各類頁面元素，如圖像、樣式表、腳本和Flash等，的下載上。減小頁面元素將會減小HTTP請求次數。這是快速顯示頁面的關鍵所在。

 

根據著名的「2-5-8原則」，用戶訪問一個頁面：

當用戶可以在2秒之內獲得響應時，會感受系統的響應很快；

當用戶在2-5秒之間獲得響應時，會感受系統的響應速度還能夠；

當用戶在5-8秒之內獲得響應時，會感受系統的響應速度很慢，可是還能夠接受；

而當用戶在超過8秒後仍然沒法獲得響應時，會感受系統糟透了，或者認爲系統已經失去響應，而選擇離開這個Web站點，或者發起第二次請求。

 

對於一個網站若是但願抓住用戶，網站的速度以及穩定性是首當其衝的。目前性能已經被列入google的網站的排名規則中。

相關文章Web Performance Optimization (WPO) – As Business Critical as SEO

 

二、前端性能關注的重點

  2.1 加載時間指標，主要包括三個時間斷

a. Time to First Impression

表示從用戶在瀏覽器鍵入url按下回車鍵一刻開始到頁面開始有反應（用戶能夠在頁面中看見一點點內容）爲止。常常能感受到的一個信號就是網頁開始顯示title。

b.Time to onLoad Event

表示從頁面開始顯示內容，到瀏覽器開始觸發OnLoad函數這一時間段。只有當初始的文本和所引用的對象加載完成，瀏覽器纔開始觸發OnLoad函數

c.Time to Fully Loaded

表示從上一時間段末到整個網頁徹底加載完成（全部OnLoad函數以及相關的動態資源加載完成）。在網頁中含有timeout或定時刷新之類處理時較爲難判斷結束點。

 

  2.2 資源狀況指標

網頁由初始的html文本中嵌入圖片以及經過XHR或者修改dom樹動態加載的內容組成，css負責樣式，js負責行爲。因此當網頁資源過多爲了下載資源，客戶端和服務器的網絡來回就更多。下面是資源方面相關的指標。

a. Total Number of Requests

  包括html網頁請求，css、js資源下載及其它網絡請求。優化的目標之一是要儘可能減小請求數。

b. Total Number of HTTP 300s/400s/500s

  表示返回狀態爲300（重定向）、400（客戶端錯誤）、500（服務器端錯誤）的http請求。儘可能避免這些請求，以提升頁面load的時間。形成這些狀態的緣由常常是服務器的實施、配置和部署問題。

c. Total Size of Web Site

  構成網頁元素總的大小。圖片或者js庫的增長都會對下載時間形成重要的影響。

d. Total Size of Images/CSS/JS

  image、css、js在網頁元素大小中佔主要比例。

e. Total Number of XHR(XMLHttpRequest) Requests

 經過js異步從服務器端得到數據的請求數。一些js框架提供了跟服務器端的更新機器，就是XHR請求。經過配置能夠減小XHR請求的數目

 

  2.3 網絡鏈接指標

瀏覽器底層的網絡鏈接對資源的下載速度有很大影響。資源的下載過程分爲不少階段。下面介紹這些階段以及瀏覽器、網絡、請求如何影響這些階段的時間

a. DNS Time

  dns 查詢的時間。網頁請求會產生一次尋找該網頁資源所在主機的dns查詢。在同個域名進行網頁切換不會形成新的dns查詢。

b. Connect Time

  指瀏覽器和服務器之間創建tcp/ip鏈接的時間，對於ssl鏈接包括握手的時間。網絡鏈接過慢、使用ssl、使用短鏈接而很是鏈接都是形成connect time較多的緣由。

c. Server Time

  指收到請求後服務器邏輯處理的時間，

d. Transfer Time

  這一指標與瀏覽器和服務器之間的鏈接速度相一致，經過減少傳輸內容或使用cdn來下降Transfer Time。

e. Wait Time

  等待時間和同一個域中服務資源的數量直接相關。每一個域的瀏覽器的物理網絡的限制，致使資源等待可用的鏈接。減小資源的數量，或將資源散佈在不一樣的域，能將這一時間下降。平均等待時間的大小更能反映等待時間是否須要注意。

f. Number of Domains / Single Resource Domains

  部署網站資源的域主機數量是很重要的，由於它影響的DNS，鏈接和等待時間。

  專門用戶資源下載的域是必要的，他將直接減小等待時間。應避免單一的資源域，不然你將爲dns查詢以及資源下載付出昂貴的代價。

 

參考：關於前端的關鍵性能指標Key Performance Indicators

 

三、前段性能測試

  3.1 DynaTrace AJAX

原本是應該按照測試點列舉的，但基本能想到的測試點均可以用DynaTrace AJAX進行檢測，就將DynaTrace AJAX做爲小標題，也因而可知DynaTrace AJAX的強大。連JQuery的創始者John Resig也極力推薦，並高度讚譽寫了篇簡單手冊Deep Tracing of Internet Explorer

 

DynaTrace AJAX是一個運行在IE瀏覽器下的免費頁面性能分析工具，它能夠支持主流的IE六、IE七、IE8瀏覽器。

 

關於DynaTrace的排名

dynaTrace AJAX also calculates Ranks for Browser Caching, Network Resources, JavaScript/AJAX and Server-Side Activities.
The overall rank is calculated by weighting in 10% on each of these Sub Ranks. The overall rank therefore is calculated by taking 60% of the rank based on the KPI's and 10% each from Caching, Network, JavaScript and Server-Side.

 

 

dynaTrace中文基礎篇

A Step-by-Step Guide to dynaTrace Ajax Edition

Deep Tracing of Internet Explorer

DynaTrace Ajax Edition：IE瀏覽器性能分析工具

 

四、前端性能優化的技巧

圖片優化：

http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html

兩篇關於前端性能優化的文章:

Yahoo團隊經驗：網站性能優化的34條黃金法則

Web應用性能優化黃金法則

dynatrace網上的一些建議：

https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Server-Side+Performance+Optimization

https://community.dynatrace.com/community/display/PUB/Best+Practices+on+JavaScript+and+AJAX+Performance

https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Browser+Caching