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、PNG8优于GIF

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

原文地址:https://www.cnblogs.com/sun927/p/5611337.html