移动端优化

1. 代码优化#####

css和js文件需要uglify

• 使用grunt等构建化工具

2. 图片优化#####

• 大小优化
  1）png:
  a.多彩图片使用png24
  b.低彩图片使用png8
  c.推荐使用pngquant

• 使用雪碧图，文件合并

3. 预加载#####

• 显性加载
  缺点：
  Loading会让整体体验流畅，但容易造成用户流失
  （个人应对办法：增加Loading的趣味性）

• 隐形加载

• 按需加载
  缺点:
  按需加载提升速度，但可能导致大量重绘

4. 避免重定向#####

5. 使用其他方式取代图片#####

• css

  
  
  

• iconfont
  对于大图片，iconfont并不比雪碧图好，建议单侧小尺寸图标才使用iconfont.

6.脚本优化#####

• 尽量避免DataURI

• 点击事件优化
  在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件

  
  
  

7. 渲染优化

• 动画优化

a) 使用css3动画
优点：
不占用js主线程
可利用硬件加速
浏览器可对动画做优化
缺点：
不支持中间状态监听

b) 使用canvas动画
优点：
可规避渲染树的计算渲染更快
缺点：
开发成本高
维护较麻烦

5个元素以内使用css3动画，5个以上使用canvas动画

c) 合理使用RAF(requestAnimationFrame)
优点：
能解决脚本问题引起的丢帧，卡顿问题
支持中间状态监听
缺点：
兼容问题

不需要兼容android 4.3浏览器的情况下，请使用RAF制作脚本动画

• 高频事件优化
  类似touchmove，scroll这类的事件可导致多次渲染，对于这种事件可以通过以下手段进行优化：
  1.使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
  2.增加响应变化的时间间隔，减少重绘次数

8.合成/绘制#####

• GPU加速
  优点：
  大幅减少了合成/绘制时间，从而大大地提高了页面速度
  缺点：
  过多的GPU层会带来性能开销，主要原因是使用GPU加速其实是利用了GPU层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。

---

参考资料：#####

[移动前端系列——移动页面性能优化.-TGideas-腾讯游戏官方设计团队]