web前端優化

移動端性能陷阱和硬件加速
1.儘量減小http請求

80%的終端用戶響應時間都花在了前端上，其中大部分時間都在下載頁面上的各類組件：圖片，樣式表，腳本，Flash等等。減小組件數必然可以減小頁面提交的HTTP請求數。這是讓頁面更快的關鍵。

　　減小頁面組件數的一種方式是簡化頁面設計。但有沒有一種方法能夠在構建複雜的頁面同時加快響應時間呢？嗯，確實有魚和熊掌兼得的辦法。

　　合併文件是經過把全部腳本放在一個文件中的方式來減小請求數的，固然，也能夠合併全部的CSS。若是各個頁面的腳本和樣式不同的話，合併文件就是一項比較麻煩的工做了，但把這個做爲站點發布過程的一部分確實能夠提升響應時間。

　　CSS Sprites 是減小圖片請求數量的首選方式。把背景圖片都整合到一張圖片中，而後用CSS的background-image和background-position屬性來定位要顯示的部分。

　　圖像映射能夠把多張圖片合併成單張圖片，總大小是同樣的，但減小了請求數並加速了頁面加載。圖片映射只有在圖像在頁面中連續的時候纔有用，好比導航條。給image map設置座標的過程既無聊又容易出錯，用image map來作導航也不容易，因此不推薦用這種方式。

　　行內圖片（Base64編碼）用data: URL模式來把圖片嵌入頁面。這樣會增長HTML文件的大小，把行內圖片放在（緩存的）樣式表中是個好辦法，並且成功避免了頁面變「重」。但目前主流瀏覽器並不能很好地支持行內圖片。

　　減小頁面的HTTP請求數是個起點，這是提高站點首次訪問速度的重要指導原則。

1. 使用CDN（內容分發網絡）(其實就是靠錢)

3.添加Expire/Cache-Control頭

Http頭介紹:Expires,Cache-Control,Last-Modified,ETag

4.啓用Gzip壓縮

5.將css放在頁面最上面

6.將script放在頁面最下面

避免在CSS中使用Expressions
把JavaScript和CSS都放到外部文件中
減小DNS查詢
壓縮 JavaScript 和 CSS
避免重定向
移除重複的腳本
配置實體標籤（ETag）
使 AJAX 緩存

工具
YSlow插件
百度統計

參考

雅虎前端優化的35條軍規
Yahoo軍規