一些前端优化方法比如tree-shaking、合并文件减少http请求等都被Vite、Webpack等现代构建工具自动完成了，不需要我们手动去处理这些，现在就说一些最新的开发过程中实际用到的优化方法：
节流和防抖
开发过程中比较常用的性能优化方法，常用于搜索、事件监听等场景中。
节流
类似于游戏里面的技能cd，就是每n秒才能运行一次，适用于优化监听高频事件。
例如按输入框输入实时搜索（必备节流）、监听鼠标位置、监听列表滚动位置等等。
防抖
类似于游戏里面的回城，就是n秒内你再怎么点的话就重新开始，适用于等待用户停止操作再执行的场景。
例如用户输入完成触发搜索（跟节流搜索不是同样需求）、防止短时间内按钮重复点击等等。
此外：节流和防抖方法封装涉及闭包知识点，对闭包知识点比较熟的可以点出来，面试官可能听到就继续问你闭包问题了。
并行请求（Promise.all和Promise.allSettled）
开发过程中遇到需要另一个接口数据作为参数发起请求的情况，小白会直接嵌套请求，那么，前后加起来就是两个接口的请求时间。
建议使用Promise.all并行请求这些接口，会在最慢的那个接口请求完成后返回所有接口的数据。
const api1 = http.get(xxx);
const api2 = http.post(xxx)
Promise.all([api1,api2]).then(res=>{
let [res1,res2] = res;
...
})
具体的话自己去搜Promise.all的用法哈。
Tips：
这里有个知识点是，all方法如果有接口失败整个请求都会失败，如果我想有接口失败继续执行怎么办？
Promise.allSettled()
- 这个方法无论里面的接口成功还是失败都会返回；
- 返回的数据会多嵌套一层，多了status参数（fulfilled/rejected）
动画优化
- 能用css的动画尽量用css，css可以硬件加速、不可见的地方不会持续执行、不占用主线程；
- css元素样式中写
transform：translateZ(0)可以开启硬件加速！（有需要加，正常不需要）
懒加载
就是你看不见的地方就先不加载，等划到了再加载。
提升首屏加载速度的时候很管用，包括：
- 组件懒加载
- 图片懒加载
直接用现有轮子，有性能提升需求的话这两个蛮常用的。
前端缓存
一般接触到的前端缓存就localStorage、sessionStorage浏览器缓存这些了（浏览器缓存还有IndexDB前端数据库，几乎用不上）
高级点的太复杂了，看大佬的，传送门：中高级前端工程师都需要熟悉的技能--前端缓存
开启Gzip/Brotli压缩
开启压缩可以使静态资源请求变小，节省带宽、加快页面渲染。
Brotli压缩适用于现代浏览器，反正新项目用这个就对了。
tips： 开发环境是不用这个的，生产环境才用得上。
- webpack
下载compression-webpack-plugin插件，然后webpack中配置，最后通知后端开启Gzip压缩。
- vite
vite生产环境默认只生成 Brotli 和 Gzip 压缩文件（但需要服务器配置才能生效）
装vite-plugin-compression，然后vite里面配置，再在nginx配置，最后在后端配置。
以上，具体还是自己去搜哈。
减少重排和重绘
字面意义了，这里可以引入合理使用v-if、v-show的知识点。
还有就是vue框架虚拟dom、vue3新特性diff算法优化这些，知识点熟的话都可以引申，不熟就别主动跳坑了。
如何减少：
- 改变元素位置的时候能用translate就不要用position，translate不触发重排。
- 避免多次读取dom元素，会触发回流，读取还要再用到就用变量缓存起来。
- 想不到了。
事件委托
这是八股文常问的就不说了。
实际开发过程中用的比较少，很少存在单个页面渲染大量数据并且加上事件的情况，一般都会分页，分页了就没必要加委托了。
图片换成webp格式
直接百度搜在线图片转webp，我没用过哈哈。
就是减少了图片体积节省带宽加载速度更快。
小图用缩略图
列表小图的话，正常后端返回的图片url应该都是缩略图，当然我就遇到过不正常的。
检查检查就对了，不是缩略图让后端改。
