前端性能优化手段

前端性能优化分为两类：

一类是文件加载更快：

减少请求资源的大小：图片压缩和文件压缩

减少网络请求次数：雪碧图(精灵图)、防抖和节流

减少渲染次数：HTTP缓存、本地缓存(sessionStorage、localStorage)、Vue中的keep-alive缓存

一类是文件渲染更快：

提前渲染：ssr服务端渲染

避免渲染阻塞：CSS放在HTML的head中，JS放在HTML的body底部

避免无用渲染：懒加载

减少渲染次数：对DOM查询结果进行缓存、对DOM的操作合并(添加、删除、替换类)、使用减少回流(重排、重布局)的标签

 

通过dns-prefetch减少DNS查询时间、图片懒加载、预加载、事件委托、动画优化：CSS3过渡和动画、translate3d、js做动画使用requestAnimationFrame

 

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

电商项目中最常用到的懒加载，一般在查看商品展示的时候向下滑动加载更多，因为商品数据太多，一次请求过来的数据太多且渲染时间长