1. 代碼優(yōu)化#####
css和js文件需要uglify
- 使用grunt等構(gòu)建化工具
2. 圖片優(yōu)化#####
大小優(yōu)化
1）png:
a.多彩圖片使用png24
b.低彩圖片使用png8
c.推薦使用pngquant使用雪碧圖，文件合并
3. 預(yù)加載#####
顯性加載
缺點：
Loading會讓整體體驗流暢，但容易造成用戶流失
（個人應(yīng)對辦法：增加Loading的趣味性）隱形加載
按需加載
缺點:
按需加載提升速度，但可能導(dǎo)致大量重繪
4. 避免重定向#####
5. 使用其他方式取代圖片#####
-
css
iconfont
對于大圖片，iconfont并不比雪碧圖好，建議單側(cè)小尺寸圖標才使用iconfont.
6.腳本優(yōu)化#####
盡量避免DataURI
-
點擊事件優(yōu)化
在移動端請適當(dāng)使用touchstart，touchend，touch等事件代替延遲比較大的click事件
7. 渲染優(yōu)化
- 動畫優(yōu)化
a) 使用css3動畫
優(yōu)點：
不占用js主線程
可利用硬件加速
瀏覽器可對動畫做優(yōu)化
缺點：
不支持中間狀態(tài)監(jiān)聽
b) 使用canvas動畫
優(yōu)點：
可規(guī)避渲染樹的計算渲染更快
缺點：
開發(fā)成本高
維護較麻煩
5個元素以內(nèi)使用css3動畫，5個以上使用canvas動畫
c) 合理使用RAF(requestAnimationFrame)
優(yōu)點：
能解決腳本問題引起的丟幀，卡頓問題
支持中間狀態(tài)監(jiān)聽
缺點：
兼容問題
- 高頻事件優(yōu)化
類似touchmove，scroll這類的事件可導(dǎo)致多次渲染，對于這種事件可以通過以下手段進行優(yōu)化：
1.使用requestAnimationFrame監(jiān)聽幀變化，使得在正確的時間進行渲染
2.增加響應(yīng)變化的時間間隔，減少重繪次數(shù)
8.合成/繪制#####
- GPU加速
優(yōu)點：
大幅減少了合成/繪制時間，從而大大地提高了頁面速度
缺點：
過多的GPU層會帶來性能開銷，主要原因是使用GPU加速其實是利用了GPU層的緩存，讓渲染資源可以重復(fù)使用，所以一旦層多了，緩存增大，就會引起別的性能問題。
