性能优化

性能指标体系

RAIL 模型（Google）

Core Web Vitals（核心网页指标）

// 收集 Core Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      console.log('LCP:', entry.startTime);
    }
    if (entry.entryType === 'layout-shift') {
      console.log('CLS:', entry.value);
    }
  }
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });

其他关键指标

• Lighthouse: 通过 Chrome DevTools / CLI lighthouse <url> 生成报告，评分基于加权组合
• Performance API: performance.timing（已弃用）→ performance.getEntriesByType('navigation')（Navigation Timing Level 2）
• web-vitals 库: npm install web-vitals — 封装好的 onLCP() onINP() onCLS() onFCP() onTTFB()

网络优化

HTTP 缓存策略

                 ┌─────────────┐
 请求 ──────────►│  强缓存      │◄── Cache-Control / Expires
                 └──────┬──────┘
                        │ 未命中
                        ▼
                 ┌─────────────┐
                 │  协商缓存    │◄── ETag / Last-Modified
                 └──────┬──────┘
                        │ 未修改
                        ▼
                  304 Not Modified

# 静态资源推荐
Cache-Control: public, max-age=31536000, immutable
# HTML
Cache-Control: no-cache
# API 带认证
Cache-Control: private, max-age=60

压缩

• Brotli 比 Gzip 小 15~25%，优先在 HTTPS 中使用
• Nginx 配置 brotli on; + brotli_static on; 使用预压缩 .br 文件

CDN 策略

• 预热: 大版本发布前主动请求所有静态资源 URL，拉回到边缘节点缓存
• 刷新: 资源回退或紧急更新时清除 CDN 缓存，配合 ?v= 参数或 hash
• 多级缓存: CDN Edge → CDN L1/L2 → Origin，减少回源

资源预加载

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//api.example.com">

<!-- 预连接（包含 DNS + TCP + TLS） -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 预加载关键资源（高优先级，当前页需要） -->
<link rel="preload" href="critical-font.woff2" as="font" crossorigin>

<!-- 预获取（低优先级，下一页可能用） -->
<link rel="prefetch" href="/next-page.js">

<!-- 预渲染（更高成本，渲染整个页面） -->
<link rel="prerender" href="/next-page.html">

HTTP 升级

Server Push 废弃原因: 推送的资源即使浏览器已有缓存也会被推过来，浪费带宽；且 Service Worker 无法拦截；不如 preload + 103 Early Hints。

雪碧图 / Base64 / SVG Sprite 对比

资源优化

图片优化

格式选择

策略: 优先 AVIF，WebP 兜底，JPEG 作为最后兼容

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="fallback" loading="lazy" decoding="async">
</picture>

响应式图片

<img
  srcset="
    image-320w.jpg 320w,
    image-640w.jpg 640w,
    image-1280w.jpg 1280w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1200px) 50vw, 33vw"
  src="image-1280w.jpg"
  alt="responsive"
>

• srcset 的 w 描述符告诉浏览器图片真实宽度
• sizes 告知浏览器在不同视口下图片的显示宽度
• 浏览器根据 DPR + 视口宽度 + sizes 自动选择最合适的资源

Lazy Loading

<!-- 浏览器原生懒加载 -->
<img src="..." loading="lazy" decoding="async">

<!-- Intersection Observer 高级控制 -->
<img class="lazy" data-src="real.jpg" alt="">
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
</script>

• loading="lazy": 浏览器处理，简单但无法精确控制
• IntersectionObserver: 更灵活，可设置 rootMargin 提前加载

字体优化

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+4E00-9FFF; /* 仅加载 CJK 字符 */
}

JS Bundle 优化

Tree Shaking

• 依赖 ES Module 静态结构（import/export 而非 require）
• sideEffects: false 在 package.json 中标记无副作用
• Webpack/Rollup 在 production 模式自动 tree-shake

// package.json
{
  "sideEffects": [
    "*.css",
    "*.global.js"
  ]
}

Code Splitting

┌──────────────────────┐
│   入口 main.js        │
├──────────────────────┤
│ Vendor (react, vue…)  │ ── splitChunks
├──────────────────────┤
│ 路由级 chunk           │ ── dynamic import
│ - /home -> Home.js    │
│ - /about -> About.js  │
│ - /detail -> Detail.js│
└──────────────────────┘

// React 动态导入
const Home = React.lazy(() => import('./pages/Home'));
// Vue 动态导入
const Home = () => import('./pages/Home.vue');

// Webpack splitChunks 配置
splitChunks: {
  chunks: 'all',
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      chunks: 'all',
    },
  },
},

构建配置优化（Webpack 5）

编译加速

// esbuild-loader（Webpack + esbuild）
{
  test: /\.ts$/,
  loader: 'esbuild-loader',
  options: { loader: 'tsx', target: 'es2020' }
}

依赖优化

渲染性能

关键渲染路径（Critical Rendering Path）

HTML ──► DOM
           │
CSS ────► CSSOM ──► Render Tree ──► Layout ──► Paint ──► Composite
           │          │               │          │
       解析 CSS   合并 DOM+CSSOM    计算布局   绘制像素   合并图层

优化内联关键 CSS:

<!-- 将首屏关键 CSS 内联在 <head> 中 -->
<style>
  /* 首屏样式，直接内联 */
  .header { position: fixed; top: 0; ... }
  .hero { height: 100vh; ... }
</style>
<!-- 非关键 CSS 异步加载 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

重排（Reflow）与重绘（Repaint）

最佳实践：

// ❌ 频繁触发重排
el.style.width = '100px';
el.style.height = '200px';
el.style.margin = '10px';

// ✅ 使用 class 批量修改
el.classList.add('active');

// ✅ 使用 transform/opacity 动画（仅触发合成）
el.style.transform = 'translateX(100px)';
el.style.opacity = '0.5';

// ✅ 批量读取时先读再写（避免强制重排）
const h = el.clientHeight; // 读
el.style.height = h + 10 + 'px'; // 写

requestAnimationFrame:

• 每一帧浏览器渲染前执行，与显示器刷新率同步（通常 60Hz）
• 用于修改样式、更新动画，避免掉帧
• 不可见页面自动暂停，节省资源

虚拟列表（Virtual Scroll）

可视区 ┌────────────┐
       │ 上缓冲区    │ ← 提前渲染，保证快速滚动进入的可视性
       ├────────────┤
       │ 可视区渲染  │ ← 用户看到的部分
       ├────────────┤
       │ 下缓冲区    │ ← 提前渲染
       └────────────┘
       ↑         ↑
   scrollTop    scrollTop+clientHeight

• 仅渲染可视区 + 上下缓冲区（通常各 5~10 个项目）
• 监听 scroll 事件计算当前可视范围
• DOM 节点池回收复用，不随数据增长
• 知名库: react-window / vue-virtual-scroller / @tanstack/react-virtual

// 核心逻辑示意
function VirtualList({ items, itemHeight, containerHeight }) {
  const [scrollTop, setScrollTop] = useState(0);
  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = Math.min(
    startIdx + Math.ceil(containerHeight / itemHeight) + bufferSize,
    items.length
  );
  const visibleItems = items.slice(startIdx, endIdx);

  return (
    <div style={{ height: containerHeight, overflow: 'auto' }} onScroll={...}>
      <div style={{ height: items.length * itemHeight, position: 'relative' }}>
        {visibleItems.map((item, i) => (
          <div key={item.id} style={{
            position: 'absolute',
            top: (startIdx + i) * itemHeight,
            height: itemHeight
          }}>
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
}

防抖（Debounce）与节流（Throttle）

// Lodash 防抖：输入建议
input.addEventListener('input', debounce(handleInput, 300));

// Lodash 节流：滚动监听
window.addEventListener('scroll', throttle(handleScroll, 100));

Web Worker

• 运行在独立线程，不阻塞主 UI 线程
• 通过 postMessage 通信
• 适用场景: 图像处理、大数据排序、编解码、复杂计算
• 限制: 无 DOM 访问、无 window/document，不能跨域加载脚本

// main.js
const worker = new Worker('compute.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  console.log('结果:', e.data);
};

// compute.js
self.onmessage = (e) => {
  const result = complexCalculation(e.data);
  self.postMessage(result);
};

OffscreenCanvas（离屏渲染）

• 在 Web Worker 中使用 Canvas 渲染
• 使用 OffscreenCanvas 替代主线程 Canvas
• 适用于复杂图形渲染（图表、游戏）

// 主线程
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('renderer.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// renderer.js
self.onmessage = (e) => {
  const canvas = e.data.canvas;
  const ctx = canvas.getContext('2d');
  // 在 Worker 中渲染
};

框架优化

React 优化

React.memo / useMemo / useCallback

// ✅ 使用 React.memo 避免不必要的重新渲染
const ExpensiveList = React.memo(({ items }) => {
  return items.map(item => <div key={item.id}>{item.name}</div>);
});

// ✅ useMemo 缓存复杂计算
const sortedItems = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// ✅ useCallback 保持函数引用稳定
const handleClick = useCallback((id) => {
  setSelected(prev => prev === id ? null : id);
}, []);

// ❌ 避免内联创建对象和函数
<ExpensiveList items={items} onClick={(id) => handleClick(id)} />
//         ↑ 每次渲染创建新函数，破坏 memo
// ✅ 改为 useCallback + 在子组件内部解构

Vue 优化

<script setup>
// ✅ computed 优于模板表达式
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// ✅ shallowRef 处理大数据集
const list = shallowRef(bigArray); // 整体替换时触发更新，不深层响应

// ❌ watch 用于有副作用的场景，不要用于派生数据
// ❌ 模板中的复杂表达式应提取到 computed
</script>

computed vs watch: computed 是惰性求值的派生声明，watch 是侦测变化后执行副作用。能用 computed 就不用 watch。

Suspense + Lazy

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <Loading />
    </template>
  </Suspense>
</template>

React 版:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<Spinner />}>
      <OtherComponent />
    </Suspense>
  );
}

构建优化

性能监控

Performance API

// Navigation Timing
const nav = performance.getEntriesByType('navigation')[0];
const ttfb = nav.responseStart - nav.requestStart;
const fcp = nav.domContentLoadedEventEnd - nav.fetchStart;

// PerformanceObserver 监听各种性能事件
const observer = new PerformanceObserver((list) => {
  // long task 检测
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'longtask') {
      console.warn(`Long Task detected: ${entry.duration}ms`, entry);
    }
  }
});
observer.observe({ type: 'longtask', buffered: true });

监控工具

Chrome DevTools Performance 面板

火焰图（Flame Chart）解读

时间 ────────────────────────────────────────────►
┌──────────────────────────────────────────────────┐
│ Main ── 线程活动                                  │
│ ┌──────┐ ┌───────┐ ┌────┐ ┌─────────┐          │
│ │Task A│ │ Task B│ │Idle│ │ Task C  │          │
│ │  ├───┐│ │       │ │    │ │  ├───┐  │          │
│ │  │sub││ │       │ │    │ │  │sub│  │          │
│ └──┴───┘│ └───────┘ └────┘ │  └───┘  │          │
└─────────┴─────────────────┴─────────┴──────────┘
 宽度 = 耗时    高度 = 调用栈深度

• 宽度表示函数执行时间，越宽越耗时
• 高度表示调用栈深度，右上角的红色三角标记为长任务（> 50ms）
• Summary 面板: 各类型活动占比（Scripting/Rendering/Painting/System/Idle）

长任务定位

1. 在 Performance 面板录制
2. 查看 Main 线程中的红色角标任务（> 50ms）
3. 点击查看调用栈，定位具体函数
4. Bottom-Up 标签页按时间倒序排列最耗时的函数

网络与模拟

• Network Throttling: 模拟 Slow 3G / Fast 3G / Offline
• CPU Throttling: 模拟低端设备（4x / 6x slowdown）
• Disable Cache: 模拟首次加载

查看重绘与 Layer