一、常規優化

javascript 外聯文件引用放在 html 文檔底部

css 外聯文件引用在 html 文檔頭部

http 靜態資源盡量用多個子域名：充分利用現代瀏覽器的多線程并發下載能力。瀏覽器的多線程下載能力

服務器端提供 html 文檔和 http 靜態資源時，盡量開啟 gzip 壓縮

盡量減少 HTTP Requests 的數量

js/css 的 minify

大量使用 CSS Sprites：這樣做可以大大地減少CSS背景圖片的HTTP請求次數；

首屏不需要展示的較大尺寸圖片，請使用 LazyLoad

避免404錯誤：請求一個外聯 js 失敗時獲得的404錯誤，不但會堵塞并行的下載，而且瀏覽器會嘗試分析404響應的內容，來辨識它是否是有用的Javascript代碼；

減少 cookies 的大?。罕M量減少 cookies 的體積對減少用戶獲得響應的時間十分重要；

去除不必要的 cookie ；

盡量減少 cookie 的大??；

留心將 cookie 設置在適當的域名下，避免影響到其他網站；

設置適當的過期時間。一個較早的過期時間或者不設置過期時間會更快地刪除 cookie，從而減少響應時間。

避免使用 javascript 來定位布局

圖片壓縮優化

不要使用frameset，少使用iframe: 搜索引擎不友好、 即使內容為空，加載也需要時間、會阻止頁面加載。禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁面。

二、中高級優化

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

引入script元素做延遲解析異步渲染，如在移動端應用廣泛的artemplate

添加Expire或Cache-Control:應用于不經常變化的組件，包括腳本、樣式表、Flash組件、圖片

避免重定向：在重定向完畢并且HTML下載完畢之前，是沒有任何東西顯示給用戶的

js代碼優化

代碼邏輯分層

避免全局變量

便于多人協作開發

各部分代碼模塊化，可以按需加載

保持全局變量的清潔

可進行單元測試

減少 DOM Elements 的數量：針對一個展現元素，盡量減少其包含的DOM結點

三、移動端頁面優化

移動頁面的速度跟三個因素有關，分別是：移動網絡帶寬速度，設備性能（CPU，GPU，瀏覽器），頁面本身。

因此移動頁面優化尤其特殊性。除了以上的處理方式，還有一些優化手段

預加載

顯性加載

參考天貓首頁，在頁面加載完畢之前，有一個緩沖的動畫過程。它一方面能增加頁面的趣味性，另一方面能讓后續頁面體驗更流暢

隱性加載 ：主要是圖片的懶加載

按需加載

能用css3實現的效果就不要用圖片

使用icon-font代替圖片

盡量避免DataURI

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

點擊事件優化

在移動端請適當使用touchstart，touchend，touch等事件代替延遲比較大的click事件。

使用成熟的前端手勢庫

動畫優化

盡量使用css3動畫

適當使用canvas動畫

合理使用requestAnimationFrame (android版本4.3以上)

高頻事件優化

類似touchmove，scroll這類的事件可導致多次渲染，對于這種事件可以通過以下手段進行優化：

使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染

增加響應變化的時間間隔，減少重繪次數：移動端的搜索結果頁的lazyload插件就是這么干的