html/css专栏 / Javascript专栏 / 前端

移动端H5前端性能优化指南

读心悦 · 9月1日 · 2020年 本文826字 · 阅读3分钟102

加载优化

1、合并CSS、JavaScript

2、合并小图片

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

4、使用长Cache,在服务器端设置缓存。

5、使用外联式引用CSS、JavaScript

6、压缩HTML、CSS、JavaScript

7、启动GZip,在服务器端设置

8、启动首页加载

9、使用按需要加载

10、使用滚屏加载

11、通过Media Query加载

12、增加Loading进度条

13、减少Cookie

14、避免重定向

15、异步加载第三方资源

图片优化

1、使用智图压缩图片

2、CSS3、SVG、IconFont代替图片

3、使用Srcset

4、使用webP 优于JPG

5、PNG8优于GIF

6、首次加载不大于1014KB

脚本优化

1、减少重绘和回流

2、缓存Dome选择与计算

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、合理使用requirestAnimationFrame代替setTimeout

5、适当使用canvas动画

6、Touchmove、Srcoll会导致多次渲染

7、使用CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、video来渲染CPU

0 条回应

×