浅谈前端性能优化手段

本文只是一个浅浅的方法总结，详细深挖可以看我给的链接文章，都是很好的文章。
此外:前端宝典的性能优化篇章，有更详细的性能优化手段介绍，深入学习可以去了解。

前端性能优化手段

前端性能优化分为两类，一类是让文件加载更快，另一类是让文件渲染更快。

1.加载更快的方法

1）让传输的数据包更小

图片压缩和文件压缩

利用canvas+js进行图片压缩，结合几篇文章来看，用法都大同小异：
https://juejin.cn/post/6844904082046451719#heading-6
https://juejin.cn/post/6940430496128040967#heading-10
https://segmentfault.com/a/1190000023486410

2）减少网络请求的次数

雪碧图/精灵图

主要思路就是请求一张图片，包含许多图标，通过css图片定位剪裁来使用对应的图标，减少发起请求的次数。

雪碧图/精灵图的应用场景一般是项目中不常更换的一些固定图标组合在一起，比如logo、搜索图标、切换图标等。

节流防抖

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

3）减少渲染的次数

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

2. 渲染更快的方法：

1）提前渲染

ssr服务器端渲染
原理： https://github.com/yacan8/blog/issues/30
https://zhuanlan.zhihu.com/p/90746589

2）避免渲染阻塞

CSS放在HTML的head中 JS放在HTML的body底部

3）避免无用渲染

懒加载
https://juejin.cn/post/6844904007589183501
电商项目中最常用到的懒加载，一般在查看商品展示的时候通常下拉加载更多，因为商品数据太多，一次性请求过来数据太大且渲染的时间太长。

虚拟列表
https://juejin.cn/post/6877507011769008135

4） 减少渲染次数

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

推荐两篇非常详细的文章:
https://juejin.cn/post/6911472693405548557
https://segmentfault.com/a/1190000041753539