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)
优点：
能解决脚本问题引起的丢帧，卡顿问题
支持中间状态监听
缺点：
兼容问题
- 高频事件优化
类似touchmove，scroll这类的事件可导致多次渲染，对于这种事件可以通过以下手段进行优化：
1.使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
2.增加响应变化的时间间隔，减少重绘次数
8.合成/绘制#####
- GPU加速
优点：
大幅减少了合成/绘制时间，从而大大地提高了页面速度
缺点：
过多的GPU层会带来性能开销，主要原因是使用GPU加速其实是利用了GPU层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。
