Performance 性能

# 性能优化 基于 Lighthouse 性能审计的深度性能优化。专注于加载速度、运行时效率和资源优化。 ## 工作原理 1. 识别代码和资源中的性能瓶颈 2. 根据对核心 Web 指标的影响进行优先级排序 3. 提供带有代码示例的具体优化方案 4. 通过前后指标对比衡量改进效果 ## 性能预算 | 资源 | 预算 | 理由 | |----------|--------|-----------| | 总页面大小 | < 1.5 MB | 3G 网络加载约 4s | | JavaScript (压缩后) | < 300 KB | 解析 + 执行时间 | | CSS (压缩后) | < 100 KB | 渲染阻塞 | | 图片 (首屏) | < 500 KB | LCP 影响 | | 字体 | < 100 KB | 防止 FOIT/FOUT | | 第三方 | < 200 KB | 不可控延迟 | ## 关键渲染路径 ### 服务器响应 * **TTFB < 800ms。** 首字节时间应尽可能快。使用 CDN、缓存和高效后端。 * **启用压缩。** 对文本资源使用 Gzip 或 Brotli。优先使用 Brotli（小 15-20%）。 * **HTTP/2 或 HTTP/3。** 多路复用减少连接开销。 * **边缘缓存。** 尽可能在 CDN 边缘缓存 HTML。 ### 资源加载 **预连接到所需源：** html **预加载关键资源：** html **延迟非关键 CSS：** html /* 首屏样式 */ ### JavaScript 优化 **延迟非必要脚本：** html **代码拆分模式：** javascript // 基于路由的拆分 const Dashboard = lazy(() => import('./Dashboard')); // 基于组件的拆分 const HeavyChart = lazy(() => import('./HeavyChart')); // 基于功能