無月

1. 代码优化

• 使用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层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。
  

参考资料：

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