### 理解性能优化的核心指标
- 关键指标：首次内容绘制（FCP）、最大内容绘制（LCP）、交互延迟（TTI）
- 工具：Lighthouse、Chrome DevTools 性能面板
- 目标：减少主线程阻塞、降低内存占用、优化网络请求
### 减少 JavaScript 文件体积
- 代码压缩：使用 Terser 或 UglifyJS 删除冗余代码
- Tree Shaking：通过 Webpack/Rollup 移除未使用的模块
- 代码分割：动态加载非关键脚本（`import()` 语法）
### 高效 DOM 操作策略
- 避免频繁重排：批量修改样式（使用 `classList` 替代直接 `style`）
- 虚拟 DOM 框架优化：React 的 `memo`、Vue 的 `v-once`
- 事件委托：减少事件监听器数量（利用事件冒泡）
### 内存管理与垃圾回收
- 避免内存泄漏：及时移除无用的事件监听、定时器
- 弱引用：使用 `WeakMap` 或 `WeakSet` 管理临时数据
- 性能分析：Chrome Memory 面板记录堆快照
### 异步任务调度优化
- 任务拆分：将长任务分解为 `requestIdleCallback` 或微任务
- Web Workers：将计算密集型任务移至后台线程
- 防抖与节流：控制高频事件（滚动、输入）的触发频率
### 网络请求优化
- 预加载关键资源：`<link rel="preload">`
- 缓存策略：Service Worker 离线缓存、HTTP 缓存头配置
- 数据分页：减少单次请求数据量（如无限滚动懒加载）
### 框架特定优化技巧
- React：避免内联函数 Props、使用 `useMemo` 缓存计算
- Vue：合理使用 `v-if` 和 `v-show`、优化响应式数据层级
- Angular：启用 Ivy 引擎、变更检测策略调整
### 性能监控与持续改进
- 真实用户监控（RUM）：集成 Sentry 或 LogRocket
- A/B 测试：对比优化前后的核心指标差异
- 自动化：CI/CD 流程中嵌入 Lighthouse 审计
