1、前端性能的意義
對于訪問一個網(wǎng)站，最花費(fèi)時間的并不是后端應(yīng)用程序處理以及數(shù)據(jù)庫等消耗的時間，而是前端花費(fèi)的時間（包括請求、網(wǎng)絡(luò)傳輸、頁面加載、渲染等）。根據(jù)web優(yōu)化的黃金法則：
80%的最終用戶響應(yīng)時間花在前端程序上，而其大部分時間則花在各種頁面元素，如圖像、樣式表、腳本和Flash等，的下載上。減少頁面元素將會減少HTTP請求次數(shù)。這是快速顯示頁面的關(guān)鍵所在。
根據(jù)著名的“2-5-8原則”，用戶訪問一個頁面：
當(dāng)用戶能夠在2秒以內(nèi)得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)很快；
當(dāng)用戶在2-5秒之間得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度還可以；
當(dāng)用戶在5-8秒以內(nèi)得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度很慢，但是還可以接受；
而當(dāng)用戶在超過8秒后仍然無法得到響應(yīng)時，會感覺系統(tǒng)糟透了，或者認(rèn)為系統(tǒng)已經(jīng)失去響應(yīng)，而選擇離開這個Web站點(diǎn)，或者發(fā)起第二次請求。
對于一個網(wǎng)站如果希望抓住用戶，網(wǎng)站的速度以及穩(wěn)定性是首當(dāng)其沖的。目前性能已經(jīng)被列入google的網(wǎng)站的排名規(guī)則中。
相關(guān)文章Web Performance Optimization (WPO) – As Business Critical as SEO
2、前端性能關(guān)注的重點(diǎn)
2.1 加載時間指標(biāo)，主要包括三個時間斷
a. Time to First Impression
表示從用戶在瀏覽器鍵入url按下回車鍵一刻開始到頁面開始有反應(yīng)（用戶可以在頁面中看見一點(diǎn)點(diǎn)內(nèi)容）為止。經(jīng)常能感覺到的一個信號就是網(wǎng)頁開始顯示title。
b.Time to onLoad Event
表示從頁面開始顯示內(nèi)容，到瀏覽器開始觸發(fā)OnLoad函數(shù)這一時間段。只有當(dāng)初始的文本和所引用的對象加載完成，瀏覽器才開始觸發(fā)OnLoad函數(shù)
c.Time to Fully Loaded
表示從上一時間段末到整個網(wǎng)頁完全加載完成（所有OnLoad函數(shù)以及相關(guān)的動態(tài)資源加載完成）。在網(wǎng)頁中含有timeout或定時刷新之類處理時較為難判斷結(jié)束點(diǎn)。
2.2 資源情況指標(biāo)
網(wǎng)頁由初始的html文本中嵌入圖片以及通過XHR或者修改dom樹動態(tài)加載的內(nèi)容組成，css負(fù)責(zé)樣式，js負(fù)責(zé)行為。所以當(dāng)網(wǎng)頁資源過多為了下載資源，客戶端和服務(wù)器的網(wǎng)絡(luò)來回就更多。下面是資源方面相關(guān)的指標(biāo)。
a. Total Number of Requests
包括html網(wǎng)頁請求，css、js資源下載及其它網(wǎng)絡(luò)請求。優(yōu)化的目標(biāo)之一是要盡量減少請求數(shù)。
b. Total Number of HTTP 300s/400s/500s
表示返回狀態(tài)為300（重定向）、400（客戶端錯誤）、500（服務(wù)器端錯誤）的http請求。盡量避免這些請求，以提高頁面load的時間。造成這些狀態(tài)的原因經(jīng)常是服務(wù)器的實(shí)施、配置和部署問題。
c. Total Size of Web Site
構(gòu)成網(wǎng)頁元素總的大小。圖片或者js庫的增加都會對下載時間造成重要的影響。
d. Total Size of Images/CSS/JS
image、css、js在網(wǎng)頁元素大小中占主要比例。
e. Total Number of XHR(XMLHttpRequest) Requests
通過js異步從服務(wù)器端獲得數(shù)據(jù)的請求數(shù)。一些js框架提供了跟服務(wù)器端的更新機(jī)器，就是XHR請求。通過配置可以減少XHR請求的數(shù)目
2.3 網(wǎng)絡(luò)連接指標(biāo)
瀏覽器底層的網(wǎng)絡(luò)連接對資源的下載速度有很大影響。資源的下載過程分為很多階段。下面介紹這些階段以及瀏覽器、網(wǎng)絡(luò)、請求如何影響這些階段的時間
a. DNS Time
dns 查詢的時間。網(wǎng)頁請求會產(chǎn)生一次尋找該網(wǎng)頁資源所在主機(jī)的dns查詢。在同個域名進(jìn)行網(wǎng)頁切換不會造成新的dns查詢。
b. Connect Time
指瀏覽器和服務(wù)器之間建立tcp/ip連接的時間，對于ssl連接包括握手的時間。網(wǎng)絡(luò)連接過慢、使用ssl、使用短連接而非常連接都是造成connect time較多的原因。
c. Server Time
指收到請求后服務(wù)器邏輯處理的時間，
d. Transfer Time
這一指標(biāo)與瀏覽器和服務(wù)器之間的連接速度相一致，通過減小傳輸內(nèi)容或使用cdn來降低Transfer Time。
e. Wait Time
等待時間和同一個域中服務(wù)資源的數(shù)量直接相關(guān)。每個域的瀏覽器的物理網(wǎng)絡(luò)的限制，導(dǎo)致資源等待可用的連接。減少資源的數(shù)量，或?qū)①Y源散布在不同的域，能將這一時間降低。平均等待時間的大小更能反映等待時間是否需要注意。
f. Number of Domains / Single Resource Domains
部署網(wǎng)站資源的域主機(jī)數(shù)量是很重要的，因?yàn)樗绊懙腄NS，連接和等待時間。
專門用戶資源下載的域是必要的，他將直接減少等待時間。應(yīng)避免單一的資源域，否則你將為dns查詢以及資源下載付出昂貴的代價。
參考：關(guān)于前端的關(guān)鍵性能指標(biāo)Key Performance Indicators
.....
