前端性能优化分为两类：
一类是文件加载更快：
减少请求资源的大小：图片压缩和文件压缩
减少网络请求次数：雪碧图(精灵图)、防抖和节流
减少渲染次数：HTTP缓存、本地缓存(sessionStorage、localStorage)、Vue中的keep-alive缓存
一类是文件渲染更快：
提前渲染：ssr服务端渲染
避免渲染阻塞：CSS放在HTML的head中，JS放在HTML的body底部
避免无用渲染：懒加载
减少渲染次数：对DOM查询结果进行缓存、对DOM的操作合并(添加、删除、替换类)、使用减少回流(重排、重布局)的标签
通过dns-prefetch减少DNS查询时间、图片懒加载、预加载、事件委托、动画优化：CSS3过渡和动画、translate3d、js做动画使用requestAnimationFrame
雪碧图的应用场景一般是项目中不常更换的固定图标组合在一起，比如logo、搜索图标等
电商项目中最常用到的懒加载，一般在查看商品展示的时候向下滑动加载更多，因为商品数据太多，一次请求过来的数据太多且渲染时间长