前端性能優(yōu)化分為如下幾個(gè)方面：
代碼部署
- 代碼的壓縮與合并
- 圖片、js、css等靜態(tài)資源使用和主站不同域名地址存儲(chǔ)（同一個(gè)域名會(huì)帶上cookie），從而使得在傳輸資源時(shí)不會(huì)帶上不必要的cookie信息
- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)CDN
- 為文件設(shè)置Last-Modified、Expires和Etag等文件頭
- 使用GZIP壓縮傳送
- 權(quán)衡DNS查找次數(shù)（使用不同域名會(huì)增加DNS查找）
- 避免不必要的重定向（加"/"）
編碼
html
- 使用結(jié)構(gòu)清晰，簡(jiǎn)單，語(yǔ)義化標(biāo)簽
- 避免空的src和href
- 不要在HTML中縮放圖片
css
- 精簡(jiǎn)css選擇器（層次不要太深）
- 把css放到頂部
- 避免@import方式引入樣式
- css中使用base64圖片數(shù)據(jù)格式取代圖片，減少請(qǐng)求數(shù)，在線(xiàn)轉(zhuǎn)base64網(wǎng)站：http://tool.css-js.com/base64.html，直接在引用圖片處使用base64的數(shù)據(jù)（往往是小圖片這么做——大的圖片數(shù)據(jù)過(guò)多）
- 使用css動(dòng)畫(huà)來(lái)取代javascript動(dòng)畫(huà)
- 使用字體圖標(biāo)
- 使用css sprite（雪碧圖）
- 使用svg圖形
- 避免使用css表達(dá)式
- 避免使用css濾鏡
javascript
- 減少引用庫(kù)的個(gè)數(shù)
- 使用reuirejs或seajs異步加載js
- JS放到頁(yè)面底部引入（這是理想狀態(tài)，實(shí)際情況中往往放在頂部）
- 避免全局查找
- 使用原生方法
- 用switch語(yǔ)句代替復(fù)雜的if else語(yǔ)句
- 使用字面量表達(dá)式來(lái)初始化對(duì)象或數(shù)組
- 減少語(yǔ)句數(shù)，比如說(shuō)多個(gè)變量聲明可以寫(xiě)成一句
- 使用innerHTML取代復(fù)雜的元素注入
- 使用事件代理（事件委托）
- 避免多次訪問(wèn)dom選擇集
- 高頻觸發(fā)事件設(shè)置使用函數(shù)節(jié)流
- 使用Web Storage緩存數(shù)據(jù)
