Web 性能优化：从理论到实践

在当今快节奏的互联网时代，网站性能直接影响用户体验和业务指标。本文将全面介绍 Web 性能优化的核心策略和实践方法。

性能指标

Core Web Vitals

Google 提出的核心性能指标：

LCP (Largest Contentful Paint): 最大内容绘制，应小于 2.5 秒
FID (First Input Delay): 首次输入延迟，应小于 100 毫秒
CLS (Cumulative Layout Shift): 累积布局偏移，应小于 0.1

资源加载优化

1. 图片优化

<!-- 使用现代图片格式 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

2. 代码分割

// 动态导入
const LazyComponent = React.lazy(() => import('./Component'));

// Webpack 配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

3. 资源预加载

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

<!-- 预连接 -->
<link rel="preconnect" href="https://api.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero-image.jpg" as="image">

代码优化

1. 减少 JavaScript 体积

使用 Tree Shaking 移除未使用的代码
压缩和混淆代码
使用现代 JavaScript 特性（ES6+）

2. CSS 优化

/* 避免过度嵌套 */
/* ❌ 不好的做法 */
.nav .menu .item .link { }

/* ✅ 好的做法 */
.nav-link { }

/* 使用 CSS 变量 */
:root {
  --primary-color: #667eea;
}

.button {
  background: var(--primary-color);
}

3. 字体优化

/* 使用 font-display: swap */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

/* 子集化字体 */
/* 只加载需要的字符 */

缓存策略

1. HTTP 缓存

# Nginx 配置示例
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

2. Service Worker 缓存

// Service Worker
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

渲染优化

1. 关键渲染路径优化

<!-- 内联关键 CSS -->
<style>
  /* 关键样式 */
</style>

<!-- 延迟非关键 CSS -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

2. 避免阻塞渲染

// 使用 async 或 defer
<script src="script.js" defer></script>
<script src="analytics.js" async></script>

网络优化

1. HTTP/2 和 HTTP/3

使用现代 HTTP 协议提升性能：

HTTP/2: 多路复用、头部压缩
HTTP/3: 基于 UDP 的 QUIC 协议

2. CDN 使用

使用内容分发网络（CDN）加速资源加载。

3. 压缩

启用 Gzip 或 Brotli 压缩：

# Gzip 压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript;

监控和测量

性能监控工具

Lighthouse: Chrome DevTools 内置
WebPageTest: 在线性能测试
Performance API: 浏览器原生 API

// 使用 Performance API
const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
console.log(`页面加载时间: ${pageLoadTime}ms`);

移动端优化

1. 响应式图片

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

2. 触摸优化

/* 优化触摸响应 */
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

总结

性能优化是一个持续的过程：

测量: 使用工具测量当前性能
分析: 识别性能瓶颈
优化: 实施优化策略
验证: 测试优化效果
迭代: 持续改进

记住，过早优化是万恶之源。先确保功能正确，再优化性能。

性能优化清单：