性能, 优化·

Web 性能优化

毫秒之争——如何让网页加载更快，用户体验更好
作者头像 W3C 标准团队

每一毫秒都重要

研究表明，页面加载时间每增加 100 毫秒，转化率就会下降 1%。3 秒后，53% 的用户会放弃访问。在移动设备上，用户对加载速度更加敏感。Web 性能优化不仅仅是技术问题，更是直接影响用户体验和业务成果的关键因素。

Web 性能优化的目标是：让页面尽可能快地展示有用内容，并保持流畅的交互体验。

核心性能指标

Google 提出了 Core Web Vitals 作为衡量 Web 性能的标准：

LCP

最大内容绘制 页面主要内容加载完成时间 目标: < 2.5 秒

FID

首次输入延迟 用户首次交互到响应的时间 目标: < 100 毫秒

CLS

累积布局偏移 页面内容意外移动的程度 目标: < 0.1

FCP

首次内容绘制 首次渲染内容的时间 目标: < 1.8 秒

LCP

最大内容绘制 页面主要内容加载完成时间 目标: < 2.5 秒

TTI

可交互时间 页面完全可交互的时间 目标: < 3.8 秒

资源加载优化

优化资源的加载顺序和方式是性能提升的关键：

// 动态导入
const module = await import('./heavy-module.js');

// 路由懒加载
const Home = () => import('./Home.vue');

图片优化

图片通常是网页最大的资源，优化图片能带来显著的性能提升：

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

<!-- 响应式图片 -->
<img src="small.jpg"
     srcset="small.jpg 640w,
             medium.jpg 1024w,
             large.jpg 1440w"
     sizes="(max-width: 640px) 100vw,
            (max-width: 1024px) 50vw,
            33vw"
     alt="描述">

<!-- 懒加载 -->
<img src="placeholder.jpg"
     data-src="image.jpg"
     loading="lazy"
     alt="描述">

CSS 优化

优化 CSS 的加载和使用：

/* 内联关键 CSS */
<head>
  <style>
    /* 首屏关键样式 */
    .header { ... }
    .hero { ... }
  </style>
  <link rel="stylesheet"
        href="main.css">
</head>

/* 使用 contain 隔离渲染 */
.card {
  contain: layout style paint;
}

/* 使用 will-change 优化动画 */
.element {
  will-change: transform;
}

/* 避免昂贵的属性 */
.bad {
  /* 避免 */
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  filter: blur(5px);
}

.good {
  /* 使用 */
  opacity: 0.5;
  transform: translateZ(0);
}

JavaScript 优化

JavaScript 是阻塞渲染的主要因素：

// 使用 defer 和 async
<script src="non-critical.js"
        async></script>

<script src="deferred.js"
        defer></script>

// 使用 Web Workers 处理繁重任务
const worker = new Worker('worker.js');

worker.onmessage = (e) => {
  console.log('结果:', e.data);
};

worker.postMessage({ data: heavyTask });

// 请求优化
// 批量请求
const data = await Promise.all([
  fetch('/api/1'),
  fetch('/api/2'),
  fetch('/api/3')
]);

// 使用 Intersection Observer
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadContent(entry.target);
      }
    });
  }
);

缓存策略

有效的缓存可以大幅减少重复访问的加载时间：

浏览器缓存

使用 Cache-Control 和 ETag 让浏览器缓存静态资源

Service Worker

实现离线缓存和推送通知

CDN 缓存

使用内容分发网络加速全球访问

HTTP/2 推送

服务器主动推送关键资源

本地存储

使用 localStorage 和 IndexedDB 缓存数据

策略更新

使用版本号或哈希值管理缓存失效

性能监测

持续监测性能指标，找出优化机会：

// Performance API
const perfData = performance.getEntriesByType('navigation')[0];

console.log('页面加载时间:', perfData.loadEventEnd - perfData.fetchStart);
console.log('DNS 查询时间:', perfData.domainLookupEnd - perfData.domainLookupStart);
console.log('TCP 连接时间:', perfData.connectEnd - perfData.connectStart);
console.log('请求响应时间:', perfData.responseEnd - perfData.requestStart);

// Web Vitals
import { onLCP, onFID, onCLS } from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

常用工具

使用专业工具分析和优化性能：

Lighthouse Chrome 内置的性能审计工具

WebPageTest 详细的多地点性能测试

DevTools 实时性能分析和网络监控

总结

Web 性能优化是一个持续的过程，需要在开发、构建、部署和监控各个环节都给予关注。从资源加载到渲染优化，从代码分割到缓存策略，每一个优化点都可能带来显著的性能提升。

记住，性能是用户体验的基础。一个快速流畅的网站不仅能提升用户满意度，还能改善 SEO 和转化率。投入时间优化性能，是最有价值的投资之一。

响应式设计的力量

一次编写，多端运行——响应式设计如何改变 Web 开发

Web 无障碍访问

让所有人都能使用 Web——无障碍访问的重要性与实现方法