移动H5前端性能优化

PC优化手段在Mobile侧同样适用。Mobile侧因手机配置原因，除加载外渲染速度也是优化重点。优化可从以下方面出发：

一、加载优化

1、合并css，javascript。

2、合并小图片，适用雪碧图。

3、缓存一切可以缓存的资源。

4、使用长Cache。

5、使用外联引用css，JavaScript。

6、压缩HTML、css、JavaScript。

7、启用GZip

8、使用首屏加载、按需加载、滚屏加载

9、通过Media Query加载

10、增加Loading进度条

11、减少cookie

12、避免重定向

13、异步加载第三方资源

二、图片优化

1、使用智图http://zhitu.tencent.com/

2、使用（css、SVG、IconFont）代替图片

3、使用Srecset

4、webP优于JPG

5、PNG8优于GIF

6、首次加载不大于1014KB（基于3秒联通平均网速所能达到值）

7、图片不宽于640

三、脚本优化

1、减少重绘和回流

2、缓存Dom选择与计算

3、缓存列表length

4、尽量使用事件代理，避免批量绑定事件

5、尽量使用ID选择器

6、使用touchStart、touchEnd代替click

四、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、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渲染。