性能优化

代码优化手段

1. 请求缓存
2. 取消请求
3. 请求重试
4. 避免重排重绘
5. 节流：窗口调整、页面滚动、拖拽（定时请求）
6. 防抖：搜索框（请求一次）
7. IntersectionObserver
8. requestAnimationFrame
9. webworker

首屏优化

1. cdn
2. gzip(前端配置的话就是静态压缩会生成.gzip 文件，否则就是服务端压缩)
3. ssr
4. loading/骨架屏（减少用户焦虑）
5. 按需加载（支持 tress-shaking）
6. 替换一些库，换成更小的库，升级老版本库，尽量不使用第三方库
7. 图片懒加载
8. 路由懒加载
9. 减少 dom 数量 和层级
10. 异步加载（体积大，但又不是马上需要的功能）
11. 利用浏览器缓存
12. 精灵图
13. 代码尽量精简
14. 去除大的 base64
15. 首屏数据尽量并行（不要一直 then），如果可行让小数据合并到其他接口
16. 使用虚拟滚动分批渲染
17. 使用 GPU 加速
18. 将第三方包进行代码分割，减小 js 体积

如果需要使用 v-for 给每项元素绑定事件时使用事件代理

<template>
  <ul @click="handleClick">
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
 handleClick(e) {
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target.innerText)
  }
}
</script>