前端性能优化规范

渲染优化

• 使用 React.memo / Vue computed 避免不必要的重渲染
• 避免在渲染函数中创建新对象或新函数，改用 useMemo / useCallback
• 长列表使用虚拟滚动（@tanstack/react-virtual、vue-virtual-scroller）
• 路由组件懒加载：React.lazy / defineAsyncComponent

资源加载

• 图片使用 WebP，提供 srcset 支持响应式
• JS / CSS 按路由 / 功能分割（Code Splitting）
• 静态资源合理配置 Cache-Control 和内容摘要（hash）文件名
• 启用 gzip / brotli 压缩

网络请求

• 并发请求用 Promise.all，避免不必要的串行
• 使用 SWR / TanStack Query 管理缓存，避免重复请求
• 搜索类操作加防抖（debounce），频繁触发操作加节流（throttle）

代码层面

• 避免频繁、分散的 DOM 操作，批量更新
• 动画使用 requestAnimationFrame，避免强制同步布局
• CPU 密集计算放入 Web Worker
• 组件卸载时及时清理定时器和事件监听，防止内存泄漏