移动H5前端性能优化

女爷i 2021-09-15 12:58 472阅读 0赞

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