web前端性能意义、关注重点、测试方案、优化技巧
1、前段性能的意義
對于訪問一個網(wǎng)站，最花費時間的并不是后端應(yīng)用程序處理以及數(shù)據(jù)庫等消耗的時間，而是前端花費的時間(包括請求、網(wǎng)絡(luò)傳輸、頁面加載、渲染等)。根據(jù)web優(yōu)化的黃金法則：
80%的最終用戶響應(yīng)時間花在前端程序上，而其大部分時間則花在各種頁面元素，如圖像、樣式表、腳本和Flash等，的下載上。減少頁面元素將會減少HTTP請求次數(shù)。這是快速顯示頁面的關(guān)鍵所在。
根據(jù)著名的“2-5-8原則”，用戶訪問一個頁面：
當用戶能夠在2秒以內(nèi)得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)很快；
當用戶在2-5秒之間得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度還可以；
當用戶在5-8秒以內(nèi)得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度很慢，但是還可以接受；
而當用戶在超過8秒后仍然無法得到響應(yīng)時，會感覺系統(tǒng)糟透了，或者認為系統(tǒng)已經(jīng)失去響應(yīng)，而選擇離開這個Web站點，或者發(fā)起第二次請求。
對于一個網(wǎng)站如果希望抓住用戶，網(wǎng)站的速度以及穩(wěn)定性是首當其沖的。目前性能已經(jīng)被列入google的網(wǎng)站的排名規(guī)則中。
相關(guān)文章Web Performance Optimization (WPO) – As Business Critical as SEO
2、前端性能關(guān)注的重點
? 2.1?加載時間指標，主要包括三個時間斷
a.?Time to First Impression
表示從用戶在瀏覽器鍵入url按下回車鍵一刻開始到頁面開始有反應(yīng)(用戶可以在頁面中看見一點點內(nèi)容)為止。經(jīng)常能感覺到的一個信號就是網(wǎng)頁開始顯示title。
b.Time to onLoad Event
表示從頁面開始顯示內(nèi)容，到瀏覽器開始觸發(fā)OnLoad函數(shù)這一時間段。只有當初始的文本和所引用的對象加載完成，瀏覽器才開始觸發(fā)OnLoad函數(shù)
c.Time to Fully Loaded
表示從上一時間段末到整個網(wǎng)頁完全加載完成(所有OnLoad函數(shù)以及相關(guān)的動態(tài)資源加載完成)。在網(wǎng)頁中含有timeout或定時刷新之類處理時較為難判斷結(jié)束點。
??2.2?資源情況指標
網(wǎng)頁由初始的html文本中嵌入圖片以及通過XHR或者修改dom樹動態(tài)加載的內(nèi)容組成，css負責樣式，js負責行為。所以當網(wǎng)頁資源過多為了下載資源，客戶端和服務(wù)器的網(wǎng)絡(luò)來回就更多。下面是資源方面相關(guān)的指標。
a.?Total Number of Requests
? 包括html網(wǎng)頁請求，css、js資源下載及其它網(wǎng)絡(luò)請求。優(yōu)化的目標之一是要盡量減少請求數(shù)。
b. Total Number of HTTP 300s/400s/500s
? 表示返回狀態(tài)為300(重定向)、400(客戶端錯誤)、500(服務(wù)器端錯誤)的http請求。盡量避免這些請求，以提高頁面load的時間。造成這些狀態(tài)的原因經(jīng)常是服務(wù)器的實施、配置和部署問題。
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ù)器端的更新機器，就是XHR請求。通過配置可以減少XHR請求的數(shù)目
??2.3?網(wǎng)絡(luò)連接指標
瀏覽器底層的網(wǎng)絡(luò)連接對資源的下載速度有很大影響。資源的下載過程分為很多階段。下面介紹這些階段以及瀏覽器、網(wǎng)絡(luò)、請求如何影響這些階段的時間
a.?DNS Time
? dns 查詢的時間。網(wǎng)頁請求會產(chǎn)生一次尋找該網(wǎng)頁資源所在主機的dns查詢。在同個域名進行網(wǎng)頁切換不會造成新的dns查詢。
b.?Connect Time
? 指瀏覽器和服務(wù)器之間建立tcp/ip連接的時間，對于ssl連接包括握手的時間。網(wǎng)絡(luò)連接過慢、使用ssl、使用短連接而非常連接都是造成connect time較多的原因。
c. Server Time
? 指收到請求后服務(wù)器邏輯處理的時間，
d.?Transfer Time
? 這一指標與瀏覽器和服務(wù)器之間的連接速度相一致，通過減小傳輸內(nèi)容或使用cdn來降低Transfer Time。
e.?Wait Time
??等待時間和同一個域中服務(wù)資源的數(shù)量直接相關(guān)。每個域的瀏覽器的物理網(wǎng)絡(luò)的限制，導致資源等待可用的連接。減少資源的數(shù)量，或?qū)①Y源散布在不同的域，能將這一時間降低。平均等待時間的大小更能反映等待時間是否需要注意。
f.?Number of Domains / Single Resource Domains
??部署網(wǎng)站資源的域主機數(shù)量是很重要的，因為它影響的DNS，連接和等待時間。
??專門用戶資源下載的域是必要的，他將直接減少等待時間。應(yīng)避免單一的資源域，否則你將為dns查詢以及資源下載付出昂貴的代價。
參考：關(guān)于前端的關(guān)鍵性能指標Key Performance Indicators
3、前段性能測試
??3.1?DynaTrace AJAX
本來是應(yīng)該按照測試點列舉的，但基本能想到的測試點都可以用DynaTrace AJAX進行檢測，就將DynaTrace AJAX作為小標題，也由此可見DynaTrace AJAX的強大。連JQuery的創(chuàng)始者John Resig也極力推薦，并高度贊譽寫了篇簡單手冊Deep Tracing of Internet Explorer
DynaTrace AJAX是一個運行在IE瀏覽器下的免費頁面性能分析工具，它可以支持主流的IE6、IE7、IE8瀏覽器。
關(guān)于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中文基礎(chǔ)篇
A Step-by-Step Guide to dynaTrace Ajax Edition
Deep Tracing of Internet Explorer
DynaTrace Ajax Edition：IE瀏覽器性能分析工具
4、前端性能優(yōu)化的技巧
圖片優(yōu)化：
http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/index.html
兩篇關(guān)于前端性能優(yōu)化的文章:
Yahoo團隊經(jīng)驗：網(wǎng)站性能優(yōu)化的34條黃金法則
Web應(yīng)用性能優(yōu)化黃金法則
dynatrace網(wǎng)上的一些建議：
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
總結(jié)
以上是生活随笔為你收集整理的web前端性能意义、关注重点、测试方案、优化技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿沟（说一说鸿沟的简介）
- 下一篇： 浏览器渲染阻塞与优化-详解推迟加载、异步