前端性能优化：让网页飞起来

为什么性能如此重要？

• 用户体验：1 秒延迟导致 7% 转化率下降
• SEO 排名：Google 将页面速度作为排名因素
• 移动端：53% 用户会在 3 秒未加载时离开

一、性能指标核心

Core Web Vitals

指标	目标	含义
LCP	<2.5s	最大内容绘制
FID	<100ms	首次输入延迟
CLS	<0.1	累计布局偏移

测量工具

• Chrome DevTools Lighthouse
• WebPageTest
• PageSpeed Insights

二、加载优化

1. 代码分割

Webpack 动态导入：

// 路由级别分割
const Dashboard = lazy(() => import("./Dashboard"));

// 组件级别分割
const HeavyComponent = lazy(() => import("./HeavyComponent"));

按功能分割：

// 用户点击时才加载
button.onclick = async () => {
  const { Chart } = await import("./Chart");
  new Chart(data);
};

2. 资源预加载

<!-- 预加载关键资源 -->
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预获取下一页资源 -->
<link rel="prefetch" href="/next-page.js">

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

3. 图片优化

现代格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

懒加载：

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="描述">

响应式图片：

<img 
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px"
  src="large.jpg"
  alt="描述">

三、渲染优化

1. 减少重排重绘

❌ 避免：

// 多次触发重排
box.style.width = "100px";
box.style.height = "200px";
box.style.color = "red";

✅ 推荐：

// 批量修改
box.style.cssText = "width: 100px; height: 200px; color: red;";

// 或使用 class
box.classList.add("active");

2. 使用 CSS Containment

.isolated-component {
  contain: layout style paint;
}

3. 虚拟化长列表

// 只渲染可见区域
function VirtualList({ items, itemHeight, containerHeight }) {
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const startIndex = Math.floor(scrollTop / itemHeight);
  
  return (
    <div style={{ height: items.length * itemHeight }}>
      {items.slice(startIndex, startIndex + visibleCount).map(renderItem)}
    </div>
  );
}

四、网络优化

1. HTTP/2 优势

• 多路复用（单个连接并发请求）
• 头部压缩
• 服务器推送

2. CDN 加速

# Nginx 静态资源缓存
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

3. Gzip/Brotli 压缩

# Brotli 压缩（比 Gzip 小 15-20%）
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json;

五、JavaScript 优化

1. 防抖节流

// 防抖：n 秒后执行
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：n 秒内只执行一次
function throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

2. Web Workers

// 主线程
const worker = new Worker("worker.js");
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

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

3. 内存管理

// 及时移除事件监听
class Component {
  mount() {
    window.addEventListener("resize", this.handleResize);
  }
  
  unmount() {
    window.removeEventListener("resize", this.handleResize);
  }
}

// 避免内存泄漏
let data = null;
function loadData() {
  data = largeData; // 使用后置 null
  // 处理数据...
  data = null;
}

六、实战检查清单

• 启用压缩（Gzip/Brotli）
• 配置 CDN 和缓存策略
• 图片格式优化（WebP/AVIF）
• 代码分割和懒加载
• 移除未使用 CSS/JS
• 最小化关键渲染路径
• 使用 HTTP/2
• 预加载关键资源
• 优化第三方脚本
• 监控 Core Web Vitals

总结

性能优化是持续过程，不是一次性任务。从测量开始，识别瓶颈，针对性优化，持续监控。

记住：每 1KB 都重要，每 100ms 都珍贵！