移动H5前端性能优化

移动H5前端优化，从以下几个方面入手：

1、加载优化

2、图片优化

3、css优化

4、脚本优化

5、渲染优化

加载优化

1、合并CSS、JS

2、合并小图片，使用雪碧图

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

4、使用长Cache

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

6、压缩HTML、CSS、JS

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（基于3秒联通平均网速所能达到值）

7、图片不宽于640

CSS优化

1、CSS写在头部，JS写在尾部或异步

2、避免图片和iFame等的空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、尽量减少重绘和回流

2、缓存DOM选择和计算

3、缓存列表、length

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

5、尽量使用ID选择器

6、使用touchstart、touchend代替click

渲染优化

1、HTML使用Viewport

2、减少DOM节点

3、尽量使用CSS3动画

4、合理使用requestAnimationFrame动画代替setTimeout

5、适当使用Canvas动画

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

7、使用CSS3 transition、CSS3 3D transforms、opacity、canvas、WebGL、video来触发GPU渲染

 

后续需要展开对每一项进行阐述   以此提醒自己

 

转载于:https://www.cnblogs.com/cdut007/p/6804790.html