前端优化手段

前端性能优化分为两类，

一类是文件加载更快，

另一类是文件渲染更快。

 

一、加载更快的方法：

1.让传输的数据包更小

1）（压缩文件/图片）：

图片压缩和文件压缩

2）减少网络请求的次数：

雪碧图/精灵图、节流防抖

3）减少渲染的次数：

缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等）

 

2.渲染更快的方法：

1）提前渲染：

ssr服务器端渲染

2）避免渲染阻塞：

CSS放在HTML的head中

JS放在HTML的body底部

3）避免无用渲染：

懒加载

4）减少渲染次数：

对dom查询进行缓存、将dom操作合并、使用减少重排的标签

 

补充：

雪碧图的应用场景一般是项目中不常更换的一些固定图标组合在一起，比如logo、搜索图标、切换图标等。 电商项目中最常用到的懒加载，一般在查看商品展示的时候通常下拉加载更多，因为商品数据太多，一次性请求过来数据太大且渲染的时间太长。