前端有哪些性能优化？
前端性能优化分两部分
1、加载性能优化
2、渲染性能优化
一、加载性能优化
本质：
• 1、减少请求次数；
• 2、减少请求资源的大小；
• 3、网络优化；
1、 减少请求次数方式
1）图片资源
○ CSS雪碧图：把一些常用、重复使用的小图合并成一张大图
○ 图片懒加载：
利用css的loading属性。视区外图片先不加载，当进入视区或者进入视区之前的某个位置加载。
○ 使用字体图标 iconFont
2）合理利用缓存
3）合并CSS文件和JS文件
减少HTTP请求数量和提高网站加载速度
2、减少资源大小
1）资源压缩
压缩图片；使用webp代替其他格式；图片使用懒加载；可以使用img的srcset，根据不同分辨率显示不同尺寸图片
2）Tree Shaking技术
Tree Shaking: 无用导出将在生产环境进行删除，到达减少资源体积的效果；
3、网络优化
1）CND：就近原则
2）Http2.0
4、其他
○ 路由懒加载
○ 第三方组件按需加载
二、渲染性能优化
1）资源加载优先级控制
• css引入放在head标签尾部，script脚本防砸body标签尾部；
• 脚本与DOM/其它脚本的依赖关系很强：对<script>设置defer
• 脚本与DOM/其它脚本的依赖关系不强：对<script>设置async
• preload 加载当前路由必需资源，优先级高，一般对于 Bundle资源使用preload；
• refetch 优先级低，在浏览器 idle 状态时加载资源，一般用以加载非首页资源；
• preload/prefetch
preload/prefetch 可控制 HTTP 请求优先级，从而达到关键请求更快响应的目的；
dns-prefetch，可对主机地址的 DNS 进行预解析。
• js和css的引入位置/script类型设置
2）减少重排重绘
• 减少页面DOM操作；
• 对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。例如：隐藏元素（display:none）、文档碎片（DocumentFragement）等（虚拟dom）；
• 用 JavaScript 修改样式时，最好不要直接修改单个样式属性，而是替换 class 来改变样式；
• 合理使用防抖和节流；
3）利用缓存
• 页面缓存（keep-alive），接口缓存（减少数据更新导致的页面刷新）
4）Web Worker
• 用于那些处理纯数据，或者与浏览器 UI 无关的长时间运行脚本；
三、vue优化
1) 路由懒加载组件
2) keep-alive 缓存组件，保持原显示状态
3) 列表项添加key，保证唯一
4) v-if 和 v-for 不要用在一个标签上，它会在每个项上进行 v-if 判断