移动H5前端性能优化指南（网上整理）

PC优化手段在手机端同样适用，在手机端提出3秒钟渲染完成首屏指标，首屏加载3秒完成或使用Loading，基于联通3G网络平均338KB（2.71Mb/s），所以首屏资源不应该超过1014KB；手机端因手机配置原因，除加载外渲染速度也是优化重点。

一、加载优化

合并CSS、JavaScript文件；

合并小图片，使用雪碧图；

缓存一切可缓存的资源；

使用长Cache；

使用外联式引用CSS、JavaScript；

压缩HTML、CSS、JavaScript；

启用GZip；

使用首屏加载；

使用按需加载；

使用滚屏加载；

通过Media Query 加载；

增加 Loading 进度条；

减少 Cookie；

避免重定向；

异步加载第三方资源；

二、图片优化

使用智图 http://zhitu.tencent.com/；

使用（css3、SVG、IconFont）代替图片；

使用 Srcset；

webP优于JPG；

PNG8 优于GIF；

首次加载不大于1014KB；

图片不宽于640；

三、脚本优化

减少重绘和回流；

缓存Dom选择与计算；

缓存列表 .length；

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

尽量使用 ID 选择器；

使用 touchstart、touchend代替click；

四、CSS优化

CSS写在头部，JavaScript 写在尾部或异步；

避免图片和iframe等的空src；

尽量避免重设图片大小；

尽量避免写在HTML 标签中写Style属性；

避免CSS表达式；

移除空的CSS规则；

正确使用Display的属性；

不滥用float；

不滥用Web字体；

不声明过多的font-size；

值为0时不需要任何单位；

标准化各种浏览器前缀；

避免让选择符看起来像正则表达式；

图片尽量避免使用DataURL；

五、渲染优化

HTML 使用Viewport；

减少Dom节点；

尽量使用CSS3动画；

合理使用requestAnimationFrame动画代替setTimeout；

适当使用Canvas动画；

使用（CSS3 transitions、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video）来触发 GPU 渲染

Touchmove、Scroll 事件会导致多次渲染；

absolute动画元素，优化安卓性能