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

1、前段效能的意義

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

80%的終端使用者響應時間花在前端程式上，而其大部分時間則花在各種頁面元素，如影象、樣式表、指令碼和Flash等，的下載上。減少頁面元素將會減少HTTP請求次數。這是快速顯示頁面的關鍵所在。

根據著名的“2-5-8原則”，使用者訪問一個頁面：

當用戶能夠在2秒以內得到響應時，會感覺系統的響應很快；

當用戶在2-5秒之間得到響應時，會感覺系統的響應速度還可以；

當用戶在5-8秒以內得到響應時，會感覺系統的響應速度很慢，但是還可以接受；

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

對於一個網站如果希望抓住使用者，網站的速度以及穩定性是首當其衝的。目前效能已經被列入google的網站的排名規則中。

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查詢以及資源下載付出昂貴的代價。

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的排名

1. dynaTrace AJAX also calculates Ranks for Browser Caching, Network Resources, JavaScript/AJAX and Server-Side Activities.   
2. 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.   

4、前端效能優化的技巧

圖片優化：

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

dynatrace網上的一些建議：