web前端性能優化建議

業界最著名的web前端性能分析工具，非Yahoo的YSlow和Google的PageSpeed莫屬。不過遺憾的是yslow的FF插件已經不能正常運行，google也被牆了，pagespeed沒法正常使用了。可是他們的優化規則仍是能夠給咱們以指導滴。簡單翻譯一下，供你們參考。

YSlow的23個優化規則

1. 減小HTTP請求次數
   合併圖片、CSS、JS，改進首次訪問用戶等待時間。
2. 使用CDN
   就近緩存==>智能路由==>負載均衡==>WSA全站動態加速
3. 避免空的src和href
   當link標籤的href屬性爲空、script標籤的src屬性爲空的時候，瀏覽器渲染的時候會把當前頁面的URL做爲它們的屬性值，從而把頁面的內容加載進來做爲它們的值。
4. 爲文件頭指定Expires
   使內容具備緩存性。避免了接下來的頁面訪問中沒必要要的HTTP請求。
5. 使用gzip壓縮內容
   壓縮任何一個文本類型的響應，包括XML和JSON，都是值得的。舊文章
6. 把CSS放到頂部
7. 把JS放到底部
   防止js加載對以後資源形成阻塞。
8. 避免使用CSS表達式
9. 將CSS和JS放到外部文件中
   目的是緩存，但有時候爲了減小請求，也會直接寫到頁面裏，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
    減小主機名能夠節省響應時間。但同時，須要注意，減小主機會減小頁面中並行下載的數量。
    IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。因此新浪會搞N個二級域名來放圖片。
11. 精簡CSS和JS
12. 避免跳轉
    同域：注意避免反斜槓 「/」 的跳轉；
    跨域：使用Alias或者mod_rewirte創建CNAME（保存域名與域名之間關係的DNS記錄）
13. 刪除重複的JS和CSS
    重複調用腳本，除了增長額外的HTTP請求外，屢次運算也會浪費時間。在IE和Firefox中無論腳本是否可緩存，它們都存在重複運算JavaScript的問題。
14. 配置ETags
    它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具備彈性，例如某個文件在1秒內修改了10次，Etag能夠綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 服務器集羣使用，可取後兩個參數。使用ETags減小Web應用帶寬和負載
15. 可緩存的AJAX
    「異步」並不意味着「即時」：Ajax並不能保證用戶不會在等待異步的JavaScript和XML響應上花費時間。
16. 使用GET來完成AJAX請求
    當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，而後才發送數據。所以使用GET獲取數據時更加有意義。
17. 減小DOM元素數量
    是否存在一個是更貼切的標籤可使用？人生不只僅是DIV+CSS
18. 避免404
    有些站點把404錯誤響應頁面改成「你是否是要找*」，這雖然改進了用戶體驗可是一樣也會浪費服務器資源（如數據庫等）。最糟糕的狀況是指向外部 JavaScript的連接出現問題並返回404代碼。首先，這種加載會破壞並行加載；其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分看成JavaScript代碼來執行。
19. 減小Cookie的大小
20. 使用無cookie的域
    好比圖片 CSS 等，Yahoo! 的靜態文件都在主域名之外，客戶端請求靜態文件的時候，減小了 Cookie 的反覆傳輸對主域名的影響。
21. 不要使用濾鏡
    png24的在IE6半透明那種東西，別亂使，淡定的切成PNG8+jpg
22. 不要在HTML中縮放圖片
23. 縮小favicon.ico並緩存

PageSpeed的優化規則

1、Cache優化
1）加大瀏覽器緩存
HEAD : Expires
引用CSS、JS, 以求須要較多更新次數的頁面加載，不會連帶請求相對固定的CSS,JS信息
固定URI，少用動態的，這樣可使緩存的URI信息更有效
2）加大代理服務器緩存

2、最小化往返時間——減小請求->回覆的次數
1）最小化DNS檢索（DNS緩存）
2）最小化重定向請求
1XX 信息相應類，接受到請求&繼續處理
2XX 處理成功相應類
3XX 重定向
4XX 客戶端錯誤
5XX 服務端錯誤從PageSpeed淺析Web前端性能
3) 去除壞鏈
4）整合外部script、CSS文件，減小文件數
5）用CSS精靈(CSS Sprites)整合image文件，減小圖片文件數
從PageSpeed淺析Web前端性能
6）優化CSS與script的下載排序（並行）
7) 去除document.write() 改爲直接定義
8）去除CSS @import 使用link引入
9）使用異步資源 （Script Dom 元素）
10）在多個Host之間並行下載：因爲服務器和每一個IP創建起的鏈接數是有限的，因此爲了加大下載的並行鏈接，一個常見作法是將一個頁面的資源放在不一樣的服務器上
3、最小化請求開支
1）最小化請求到一個包裝載：確保Cookie和 HEAD最小化
2）請求獲取靜態資源時，去除Cookie冗餘
靜態資源如： images, JS 、CSS files
不須要和Cookies放到一塊兒
4、最小化負載——減小下載流量
1) 用gzip或deflate壓縮
2）去除無用的CSS （製做頁面時，避免直接從其餘類似頁面直接拷貝CSS,而引起CSS冗餘）
3) 壓縮精簡javascript、html、CSS
4) 推遲javascript加載
5) 應用等比例縮放圖片
6）URL惟一化
5、優化展示
1）精煉CSS標記(CSS Selector)
2) 避免使用CSS表達式（CSS expression）
3) 將CSS放置在head而非body
4) 明確圖片尺寸
5）明確字符集於head
6、手機端優化
1）推遲script解析
2）cache重定向頁面(專爲手機瀏覽用)