一、常規(guī)優(yōu)化
javascript 外聯(lián)文件引用放在 html 文檔底部
css 外聯(lián)文件引用在 html 文檔頭部
http 靜態(tài)資源盡量用多個子域名：充分利用現(xiàn)代瀏覽器的多線程并發(fā)下載能力。瀏覽器的多線程下載能力
服務(wù)器端提供 html 文檔和 http 靜態(tài)資源時，盡量開啟 gzip 壓縮
盡量減少 HTTP Requests 的數(shù)量
js/css 的 minify
大量使用 CSS Sprites：這樣做可以大大地減少CSS背景圖片的HTTP請求次數(shù)；
首屏不需要展示的較大尺寸圖片，請使用 LazyLoad
避免404錯誤：請求一個外聯(lián) js 失敗時獲得的404錯誤，不但會堵塞并行的下載，而且瀏覽器會嘗試分析404響應(yīng)的內(nèi)容，來辨識它是否是有用的Javascript代碼；
減少 cookies 的大?。罕M量減少 cookies 的體積對減少用戶獲得響應(yīng)的時間十分重要；
去除不必要的 cookie ；
盡量減少 cookie 的大小；
留心將 cookie 設(shè)置在適當(dāng)?shù)挠蛎拢苊庥绊懙狡渌W(wǎng)站；
設(shè)置適當(dāng)?shù)倪^期時間。一個較早的過期時間或者不設(shè)置過期時間會更快地刪除 cookie，從而減少響應(yīng)時間。
避免使用 javascript 來定位布局
圖片壓縮優(yōu)化
不要使用frameset，少使用iframe: 搜索引擎不友好、 即使內(nèi)容為空，加載也需要時間、會阻止頁面加載。禁止使用iframe引入外部資源，不包括allyes廣告，不包括about:blank的空頁面。
二、中高級優(yōu)化
combo handler 的引入：
通過combo handler模塊，來合并相同URL下的Javascript和CSS文件，從而減少文件請求數(shù)
我們移動端首頁就做了優(yōu)化
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元素做延遲解析異步渲染，如在移動端應(yīng)用廣泛的artemplate
添加Expire或Cache-Control:應(yīng)用于不經(jīng)常變化的組件，包括腳本、樣式表、Flash組件、圖片
避免重定向：在重定向完畢并且HTML下載完畢之前，是沒有任何東西顯示給用戶的
js代碼優(yōu)化
代碼邏輯分層
避免全局變量
便于多人協(xié)作開發(fā)
各部分代碼模塊化，可以按需加載
保持全局變量的清潔
可進(jìn)行單元測試
減少 DOM Elements 的數(shù)量：針對一個展現(xiàn)元素，盡量減少其包含的DOM結(jié)點(diǎn)
三、移動端頁面優(yōu)化
移動頁面的速度跟三個因素有關(guān)，分別是：移動網(wǎng)絡(luò)帶寬速度，設(shè)備性能（CPU，GPU，瀏覽器），頁面本身。
因此移動頁面優(yōu)化尤其特殊性。除了以上的處理方式，還有一些優(yōu)化手段
預(yù)加載
顯性加載
參考天貓首頁，在頁面加載完畢之前，有一個緩沖的動畫過程。它一方面能增加頁面的趣味性，另一方面能讓后續(xù)頁面體驗(yàn)更流暢
隱性加載 ：主要是圖片的懶加載
按需加載
能用css3實(shí)現(xiàn)的效果就不要用圖片
使用icon-font代替圖片
盡量避免DataURI
DataURI要比簡單的外鏈資源慢6倍，生成的代碼文件相對圖片文件體積沒有減少反而增大，而且瀏覽器在對這種base64解碼過程中需要消耗內(nèi)存和cpu，這個在移動端壞處特別明顯。
點(diǎn)擊事件優(yōu)化
在移動端請適當(dāng)使用touchstart，touchend，touch等事件代替延遲比較大的click事件。
使用成熟的前端手勢庫
動畫優(yōu)化
盡量使用css3動畫
適當(dāng)使用canvas動畫
合理使用requestAnimationFrame (android版本4.3以上)
高頻事件優(yōu)化
類似touchmove，scroll這類的事件可導(dǎo)致多次渲染，對于這種事件可以通過以下手段進(jìn)行優(yōu)化：
使用requestAnimationFrame監(jiān)聽幀變化，使得在正確的時間進(jìn)行渲染
增加響應(yīng)變化的時間間隔，減少重繪次數(shù)：移動端的搜索結(jié)果頁的lazyload插件就是這么干的
