# 移動H5前端性能優化
- PC優化手段在Mobile端同樣適用
- 在Mobile端有三秒渲染完成首屏指標
- 首頁加載3s完成或使用Loading
- 基于聯通3G網絡平均338KB/S(2.71MB/S) ,所以首屏資源不應該超過1014KB
## 加載優化
1. 合并 CSS, JavaScript
2. 合并小圖片,使用雪碧圖
3. 緩存一切可以緩存的資源
4. 使用長Cache
5. 使用外聯引用 CSS, JavaScript
6. 壓縮HTML, CSS, JavaScript
7. 啟動 GZip
8. 使用首屏加載
9. 使用按需加載
10. 使用滾屏加載
11. 通過 Media Query 加載
12. 增加 Loading 進度條
13. 減少 Cookie
14. 避免重定向
15. 異步加載第三方資源
## 圖片優化
1. 使用智圖 http://zhitu.isux.us/
2. 使用( CSS , SVG, IconFont ) 代替圖片
3. 使用 Srcset
4. webP 優于 JPG
5. PNG8 優于 GIF
6. 首次加載不大于1014KB(基于3S聯通平均網速所有達到的值)
7. 圖片寬不大于640
## CSS優化
1. CSS 寫在頭部, JavaScript 寫在尾部或異步
2. 避免圖片和IFrame 等的空 src
3. 盡量避免重設圖片大小
4. 圖片盡量避免使用 DataURL
5. 盡量避免寫在 HTML 標簽中寫 Style 屬性
6. 避免CSS 表達式
7. 移除空的CSS 規則
8. 正確使用 Display 的屬性
9. 不濫用 Float
10. 不濫用 Web字體
11. 不聲明過多的 Font-size
12. 值為0 時不需要任何單位
13. 標準化各種瀏覽器前綴
14. 避免讓選擇符看起來像正則表達式
## 腳本優化
1. 減少重繪和回流
2. 緩存DOM選擇與計算
3. 緩存列表的length
4. 盡量使用事件代理,避免批量綁定事件
5. 盡量使用ID選擇符
6. 使用touchstart, touchend 代替click
## 渲染優化
1. HTML 使用 Viewport
2. 減少DOM節點
3. 盡量使用CSS3 動畫
4. 合理使用 requestAnimationFrame 動畫代替 setTimeout
5. 適當使用 Canvas 動畫
6. Touchmove, Scroll 事件會導致多次渲染
7. 使用 ( CSS3 transitions, CSS3 3D transforms ,Opacity , Canvas, WebGL, Video )
來觸發GPU渲染
