轉：https://blog.csdn.net/zimin1985/article/details/46682393
相對成熟的后端性能測試工具LoadRunner和開源的jmeter。前端性能一直缺乏更多的重視以及測試、優化的文檔支持。這里簡單介紹下前端性能的意義、關注重點、測試方案和優化技巧
1、前段性能的意義
對於訪問一個網站，最花費時間的並不是后端應用程序處理以及數據庫等消耗的時間，而是前端花費的時間（包括請求、網絡傳輸、頁面加載、渲染等）。根據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、前端性能關注的重點
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、前段性能測試
3.1 DynaTrace AJAX
本來是應該按照測試點列舉的，但基本能想到的測試點都可以用DynaTrace AJAX進行檢測，就將DynaTrace AJAX作為小標題，也由此可見DynaTrace AJAX的強大。連JQuery的創始者John Resig也極力推薦，並高度贊譽寫了篇簡單手冊Deep Tracing of Internet Explorer
DynaTrace AJAX是一個運行在IE瀏覽器下的免費頁面性能分析工具，它可以支持主流的IE6、IE7、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.
A Step-by-Step Guide to dynaTrace Ajax Edition
Deep Tracing of Internet Explorer
DynaTrace Ajax Edition：IE瀏覽器性能分析工具
4、前端性能優化的技巧
圖片優化：
http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html
兩篇關於前端性能優化的文章:
dynatrace網上的一些建議：
https://community.dynatrace.com/community/display/PUB/Best+Practices+on+Browser+Caching