前端性能測試和調優(yōu)
講到性能測試，除了后臺的之外，還有一部分是前臺的性能測試，前端的性能測試這里主要需要尊從以下規(guī)定。
前端性能調優(yōu)指南
雅虎23條
Minimize HTTP Requests 盡可能少的http請求
http請求是要耗時的，想辦法減少請求數自然可以提高網頁速度。常用的方法，合并css，js以及 Image maps和css sprites等。Use a Content Delivery Network 使用CDN
將一些靜態(tài)資源放到CDN上，我不記得在哪個小網站上看到說瀏覽器下載資源一次性在同一域名下能夠并發(fā)下載6個，所以使用不同的CDN服務，能夠提升并發(fā)的下載速度。Avoid empty src or href 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器仍讓會去請求這個空的地址，從而造成浪費Add an Expires or a Cache-Control Header添加Expire/Cache-Control 頭
現在越來越多的圖片，腳本，css，flash被嵌入到頁面中，當我們訪問他們的時候勢必會做許多次的http請求。其實我們可以通過設置Expires header 來緩存這些文件。Expire其實就是通過header報文來指定特定類型的文件在覽器中的緩存時間。大多數的圖片，flash在發(fā)布后都是不需要經常修改的，做了緩存以后這樣瀏覽器以后就不需要再從服務器下載這些文件而是而直接從緩存中讀取，這樣再次訪問頁面的速度會大大加快。Gzip Components啟用Gzip壓縮
Gzip的思想就是把文件先在服務器端進行壓縮，然后再傳輸。這樣可以顯著減少文件傳輸的大小。Put StyleSheets at the Top 把css放在頂部
css，全稱Cascading Style Sheets (層疊樣式表單)，說簡單點，css主要是用來設置網頁的樣式、框架。瀏覽器的渲染是從上往下進行的，把CSS放在頂部，瀏覽器會首先進行渲染css，這樣給用戶看到的就是一個有框架的頁面，而不是以前那種當網絡大姨媽的時候，擠在一坨了。Put Scripts at the Bottom 把JS放在底部
JS放在底部，這是因為js下載時候會獨占資源，也就是說當下載js時候，瀏覽器是無法下載其他的資源的。所以把js放在底部，不會影響到其他的資源的下載。Avoid CSS Expressions 避免使用css表達式
Make JavaScript and CSS External 將CSS和JS放到外部文件中
將css和js放在外部文件中的就是為了能夠緩存下來Reduce DNS Lookups 減少DNS解析
查找DNS是需要花費時間的，經驗的總結是至少需要20毫秒左右的時間。在此期間，瀏覽器是無法下載其他任何內容資源的。所以瀏覽器會想辦法對DNS的查找結果進行緩存。而除了瀏覽器的緩存之外，操作系統（例如Windows)也會對DNS查詢的結果做緩存。只不過，由于瀏覽器使用太過頻繁，目前的主流瀏覽器都使用自己獨有的緩存，而不使用操作系統的緩存。
yahoo的建議一個頁面所包含的域名數盡量控制在2-4個。Minify JavaScript and CSS 壓縮js和CSS
壓縮js和css的左右，減少頁面字節(jié)數。容量小頁面加載速度自然也就快。而且壓縮除了減少體積以外還可以起到一定的保護左右。唯一的后果就是會造成代碼的可讀性降低。Avoid Redirects 減少重定向
這個就不用多說了，每重定向一次就會增加一個請求Remove Duplicate Scripts 移除重復的js代碼
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。
不僅是要做到不重復，更是要做到可重用。
Configure ETags 配置Etags
Etags相當于一個網頁的指紋一樣，它用來判斷瀏覽器緩存里的元素是否和原來服務器上的一致。我們可以通過抓包來查看是否配置有etag，后面會簡單的說一下etagsMake AJAX Cacheable 可緩存ajax
即使AJAX是動態(tài)產生的而且只對一個用戶起作用，他們依然可以被緩存。
It’s important to remember that “asynchronous” does not imply “instantaneous”.（記住“異步”不是“瞬間”這一點很重要）
-
Use GET for AJAX Requests 使用get方式完成ajax請求
（ajax請求實際上就是把body的東西動態(tài)的進行替換，造成前端頁面沒有刷新的假象）
這個就比較好理解了，使用get請求完成ajax請求只需要一步就可以把參數傳過去，但是使用post請求分兩步 -
Reduce the Number of DOM Elements 減少DOM元素
頁面上的dom節(jié)點盡可能的少 -
No 404s 避免404
站點本身里（非搜索結果）出現404頁面，無意義的404頁面會影響用戶體驗并且會消耗服務器資源。 -
Reduce Cookie Size 減少cookie的大小
減小cookie的大小，每一次請求都會把cookie發(fā)送到后臺 - Use Cookie-Free Domains for Components使用無cookie的域
-
Avoid Filters不要使用濾鏡
濾鏡是什么，我特么也不知道，據說是一個會在ie上比較慢的東西 -
Do Not Scale Images in HTML 不要在HTML中縮放圖片
不要在html中縮放圖片，盡可能的就是頁面需要多大的圖片就給多大的圖片 -
Make favicon.ico Small and Cacheable
是圖標盡可能的小，并且可以被緩存起來。
