打开速度怎么变快 - 首屏加载优化
再次打开速度怎么变快 - 缓存优化
操作怎么才顺滑 - 渲染优化
动画怎么保证流畅 - 长任务拆分
1.首屏加载优化:
引入案例：我们以前首页 打开时间是3s左右，做了一下优化后，打开时间缩短了一半
FCP首次内容绘制，FP 到 FCP 中间其实主要是 SPA 应用js执行，太慢就会白屏
FMP首次有效绘制，主要内容呈现的时间
LCP最大内容渲染，加载最大内容块呈现时间
这三个指标都是 渲染指标，主要处理办法 就是项目体积减小
## 图片优化，Webp，图片压缩，图片尺寸(在合适的容器内用合适的尺寸图片1倍2倍3倍图)
## 懒加载资源，图片懒加载、js 异步加载
##css、JavaScript 文件压缩，打包构建阶段完成
代码压缩
文件合并
文件拆分
Tree shaking
动态加载
2.动画卡顿：是因为长任务 造成阻塞，导致卡顿
##减少主线程阻塞：优化 JavaScript 执行，较少长任务(复杂的计算【web worker】、promise/Async/Await）
##防抖节流
## GPU，cpu的空闲时间、抢占cpu空闲时间、以下属性可以做到CSS 3D变换或透视变换、CSS动画或过度效果、video或canvas元素进行图像处理、CSS滤镜效果
3.状态管理优化： ##减少全局状态的依赖：将状态尽可能局部化，避免使用全局状态管理所有数据。
##使用高效的状态管理库：使用轻量、高性能的状态管理工具，如 Zustand、Jotai，它们具备更细粒度的状态更新机制。
##避免不必要的状态更新
##精简 Vuex或 Pinia 的全局状态：将不需要全局共享的状态移至组件内部，减少全局状态更新的开销。
##模块化和按需加载：将 Vuex 或 Pinia 的状态模块化，按需加载，提高性能。
4.渲染优化： ##拆分组件和局部更新：将大组件拆分为多个子组件，使用 keep-alive 缓存不活跃的组件，减少重新渲染的开销。
##避免 watch 的过度使用：优化 watch 的逻辑，仅对必要的依赖进行监听，减少副作用执行。
##使用虚拟滚动：对长列表使用虚拟滚动库(如 vue-virtual-scroller)进行优化。
##避免多余的 Getter 重计算：将计算密集型的逻辑放入组件的computed或 watch 中，而不是在store 的 getter 中。
##使用请求合并，多次请求合并成一个请求