頁面優化的方式有哪些？

常規優化

1. javascript 外聯文件引用放在 html 文檔底部
2. css 外聯文件引用在 html 文檔頭部
3. http 靜態資源儘可能用多個子域名：充分利用現代瀏覽器的多線程併發下載能力。瀏覽器的多線程下載能力
4. 服務器端提供 html 文檔和 http 靜態資源時，儘可能開啓 gzip 壓縮
5. 儘可能減小 HTTP Requests 的數量
6. js/css 的 minify
7. 大量使用 CSS Sprites：這樣作能夠大大地減小CSS背景圖片的HTTP請求次數；
8. 首屏不須要展現的較大尺寸圖片，請使用 LazyLoad
9. 避免404錯誤：請求一個外聯 js 失敗時得到的404錯誤，不但會堵塞並行的下載，並且瀏覽器會嘗試分析404響應的內容，來辨識它是不是有用的Javascript代碼；
10. 減小 cookies 的大小：儘可能減小 cookies 的體積對減小用戶得到響應的時間十分重要；
    • 去除沒必要要的 cookie ；
    • 儘可能減小 cookie 的大小；
    • 留心將 cookie 設置在適當的域名下，避免影響到其餘網站；
    • 設置適當的過時時間。一個較早的過時時間或者不設置過時時間會更快地刪除 cookie，從而減小響應時間。
11. 避免使用 javascript 來定位佈局
12. 圖片壓縮優化
13. 不要使用frameset，少使用iframe: 搜索引擎不友好、 即便內容爲空，加載也須要時間、會阻止頁面加載。禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁面。

中高級優化

1. combo handler 的引入：
   經過combo handler模塊，來合併相同URL下的Javascript和CSS文件，從而減小文件請求數
   咱們移動端首頁就作了優化

   http://res.suning.cn/project/mvs/RES/common/script/??module/iscroll-lite/5.1.3/iscroll-lite.js,module/alertBox/2.0.0/alertBox.js,module/swipe/1.1.0/swipe.js

2. 引入script元素作延遲解析異步渲染，如在移動端應用普遍的artemplate
3. 添加Expire或Cache-Control:應用於不常常變化的組件，包括腳本、樣式表、Flash組件、圖片
4. 避免重定向：在重定向完畢而且HTML下載完畢以前，是沒有任何東西顯示給用戶的
5. js代碼優化
   • 代碼邏輯分層
   • 避免全局變量
   • 便於多人協做開發
   • 各部分代碼模塊化，能夠按需加載
   • 保持全局變量的清潔
   • 可進行單元測試

6. 減小 DOM Elements 的數量：針對一個展示元素，儘可能減小其包含的DOM結點

移動端頁面優化

移動頁面的速度跟三個因素有關，分別是：移動網絡帶寬速度，設備性能（CPU，GPU，瀏覽器），頁面自己。
所以移動頁面優化尤爲特殊性。除了以上的處理方式，還有一些優化手段

1. 預加載
   • 顯性加載
   參考天貓首頁，在頁面加載完畢以前，有一個緩衝的動畫過程。它一方面能增長頁面的趣味性，另外一方面能讓後續頁面體驗更流暢
   • 隱性加載 ：主要是圖片的懶加載
2. 按需加載
3. 能用css3實現的效果就不要用圖片
4. 使用icon-font代替圖片

5. 儘可能避免DataURI

   DataURI要比簡單的外鏈資源慢6倍，生成的代碼文件相對圖片文件體積沒有減小反而增大，並且瀏覽器在對這種base64解碼過程當中須要消耗內存和cpu，這個在移動端壞處特別明顯。

6. 點擊事件優化

   在移動端請適當使用touchstart，touchend，touch等事件代替延遲比較大的click事件。
7. 使用成熟的前端手勢庫

8. 動畫優化

   • 儘可能使用css3動畫
   • 適當使用canvas動畫
   • 合理使用requestAnimationFrame (android版本4.3以上)

9. 高頻事件優化

   相似touchmove，scroll這類的事件可致使屢次渲染，對於這種事件能夠經過如下手段進行優化：

• 使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染
• 增長響應變化的時間間隔，減小重繪次數：移動端的搜索結果頁的lazyload插件就是這麼幹的

參考連接

1. http://www.cnblogs.com/and/p/3390676.html

2. http://blog.csdn.net/j_shocker/article/details/46912601

3. http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml