h5移动端前端性能优化

1.脚本优化

(1)减少重绘和回流

(2)缓存Dom选择与计算

(3)缓存列表length

(4)尽量使用事件代码，避免批量绑定事件

(5)尽量使用ID选择器

(6)使用touchstart、touchend代替click

 

2.加载优化：

(1)合并css、javaScript

(2)合并小图片，使用雪碧图

(3)缓存一切可缓存的资源

(4)使用外联式引用css、javascript

(5)使用首屏加载、使用按需加载、使用滚屏加载

(6)减少Cookie

(7)避免重定向

(8)异步加载第三方资源

3.渲染优化

(1)html使用viewport

(2)减少Dom节点

(3)适当使用Canvas动画

(4)Touchmove、Scrollg事件会导致多次渲染

(5)使用（css3 transitions、css3 3D transforms、Opacity、Canvas、Video）来触发GPU渲染。

4.css优化

(1)css写在头部,JavaScript写在尾部或异步

(2)图片尽量避免使用DataURL

(3)尽量避免在HTML标签中写Style属性

(4)避免css表达式

(5)避免css规则

(6)正确使用Display的属性

(7)值为0时不需要任何单位

(8)不声明过多的font-size

(9)不要滥用web字体

(10)标准化各种浏览器前缀

(11)避免让选择符看起来正则表达式

 

5.图片优化

(1)图片不宽于640

(2)首次加载不大于1014KB

(3)使用css3、SVG、Iconfont代替图片

(4)webP优于JPG、PNG８优于GIF

总结：pc优化手段在mobile同样适用