应用级性能优化，需要结合实际需求展开分析，通常我们需要从以下几个方面来考虑：
1. 识别性能瓶颈
识别性能瓶颈是优化的第一步，通过各种工具和方法找到影响性能的主要原因：
-
Chrome DevTools Performance 面板：通过记录页面的加载、渲染和 JavaScript 执行时间，发现导致页面卡顿或延迟的原因，如长时间的计算或频繁的重绘。
-
Web Vitals：使用 Web Vitals 来测量页面的核心性能指标，如加载时间、交互延迟和页面稳定性，从用户体验的角度找出瓶颈。
-
性能分析工具：使用 Lighthouse 或 WebPageTest 等工具生成性能报告，帮助你了解应用的整体性能情况。
-
React DevTools：使用 React DevTools 中的 Profiler 分析React组件的渲染时间和更新频率，识别出性能瓶颈组件。
- Vue Devtools：这是一款用于调试 Vue 应用的扩展，提供了组件树、事件监控、Vuex 状态等信息，并允许你检查每个组件的渲染时间。
2. 组件优化
组件的设计和实现对性能有重要影响，优化组件可以显著提高应用的响应速度。
2.1. React组件优化
-
React.memo：对纯展示组件使用 React.memo，避免因父组件更新而引发的不必要渲染。
-
useCallback 和 useMemo：使用 useCallback 缓存函数，useMemo 缓存复杂计算的结果，减少子组件的重复渲染。
-
长列表虚拟化：对于渲染大量数据的组件（如表格和列表），使用 React Window 或 React Virtualized 实现列表虚拟化，仅渲染可视区域的数据，减少 DOM 节点数量。
-
懒加载：使用 React.lazy 和 Suspense 实现组件的按需加载，减少首屏渲染的 JavaScript 体积，提高加载速度。
2.2. Vue组件优化
-
减少不必要的重新渲染：使用 v-if 或 v-show 控制组件的渲染，避免不必要的渲染开销。
-
按需加载组件：使用动态导入和 Vue 的 async component 特性，按需加载组件，减少初始加载时间。
-
使用 key 属性：在 v-for 列表中使用唯一的 key 属性，确保 Vue 能够高效地更新 DOM。
-
事件监听的解绑：当组件销毁时，确保解绑不再需要的事件监听器。
3. 状态优化
状态管理的设计和使用方式直接影响组件的渲染频率和性能。
3.1. React状态优化
-
减少状态提升：仅在必要时提升状态，避免状态提升导致的全局渲染，保持状态尽量靠近使用它的组件。
-
拆分状态和选择性更新：拆分大的状态对象，使用 useSelector 精确选择需要的状态部分，减少不必要的渲染。
-
优化 Context 使用：避免 Context 的全局更新，使用多个 Context 或 useMemo 包裹提供的值来减少重渲染。
-
避免深层嵌套更新：避免不必要的深层状态嵌套更新，通过合理的状态设计减少不相关组件的重渲染。
javascript
// 代码块
state = {
userInfo: {
name
}
}
// 非常精准只订阅 name 的变更
useSelector(state => state.userInfo.name)3.2. Vue状态优化
Pinia 是 Vue 生态系统中的一个轻量级状态管理库，作为 Vuex 的替代品，它提供了更简洁的 API 和更好的性能。
-
更新粒度控制：一定要确保更新的状态是尽可能小范围的，这样才能够尽可能少更新视图内容。
-
模块化管理：使用 Pinia 时，建议将状态拆分为多个 store 模块，以避免单一状态树过于庞大和复杂。这不仅有助于维护，还能提升性能。
-
懒加载 Store：通过 Pinia 的 defineStore 动态创建 store，当某个 store 仅在特定页面或组件中需要时，可以延迟加载它。这样可以减少应用的初始加载时间。
-
State 持久化：如果某些状态需要在页面刷新后保持，可以使用 Pinia 的插件功能将状态持久化到 localStorage 或 sessionStorage，避免不必要的网络请求或重新计算。
-
避免不必要的深度响应：Pinia 允许你明确哪些状态需要响应式，哪些不需要。对于不需要响应式的复杂对象，可以使用 shallowRef 或 shallowReactive 来减少响应式开销。
4. 性能监控
持续的性能监控和优化是保持应用良好性能的重要手段：
-
性能监控工具：使用 Google Lighthouse、Web Vitals 和其他性能监控工具持续跟踪应用的性能表现。
-
日志和警报：设置性能日志和警报，及时发现应用的性能问题，如内存泄漏、长时间的无响应操作等。
-
用户体验测试：通过用户体验测试和性能模拟，评估真实环境下的应用表现，发现潜在的性能瓶颈并做出改进。
5. 补充资料
-
performance： Window: performance property - Web APIs | MDN
-
webvitals：https://web.dev/articles/vitals?hl=zh-cn
-
sentry： Sentry Docs | Application Performance Monitoring & Error Tracking Software
-
tracing： Tracing
-
React Devtools： React Developer Tools -- React
-
React Profiler：<Profiler> -- React
-
editor jotai 优化状态： https://github.com/toeverything/AFFINE
-
基础官方优化方案：https://cn.vuejs.org/guide/best-practices/performance.html