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