一、性能指标：我们优化的是什么？

1. 核心Web指标（Core Web Vitals）

• LCP（最大内容绘制）：2.5秒
• FID（首次输入延迟）：100毫秒
• CLS（累积布局偏移）：0.1

二、构建阶段的优化

1. 代码分割与懒加载

// React代码分割
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

2. Tree Shaking配置

// webpack配置
optimization: {
  usedExports: true,
  sideEffects: true,
  minimize: true
}

三、网络传输优化

1. 静态资源优化策略

2. HTTP/2服务器推送

server {
    listen 443 ssl http2;
    http2_push /styles.css;
    http2_push /app.js;
}

四、运行时优化

1. 虚拟列表优化长列表

// react-window虚拟列表
import { FixedSizeList as List } from 'react-window';

2. Web Worker处理计算密集型任务

const worker = new Worker('worker.js');
worker.postMessage({ type: 'CALCULATE', data: largeDataset });

五、监控与诊断

1. Performance API监控长任务

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task detected:', entry);
    }
  }
});

六、实际案例分析

案例1：电商网站首页优化

问题：首页加载时间8.2秒 → 解决方案：图片懒加载 + 关键CSS内联
结果：加载时间降至2.1秒

案例2：数据可视化大屏优化

问题：渲染5万条数据卡顿 → 解决方案：虚拟滚动 + Web Worker
结果：FPS从12提升到60

七、工具推荐

• 性能分析：Lighthouse, WebPageTest
• 构建工具：Vite, esbuild
• 监控平台：Sentry, Datadog RUM

八、最佳实践总结

1. 测量第一：优化前先找到瓶颈
2. 渐进式优化：从影响最大的地方开始
3. 保持简单：避免过度优化
4. 持续监控：性能优化是持续过程
5. 考虑网络环境：适配不同用户条件