前端性能优化清单：2026 年你该知道的 20 个技巧

为什么性能很重要

谷歌研究表明，页面加载时间每增加 1 秒，转化率下降 7%。前端性能优化不是锦上添花，而是直接影响业务的核心指标。

加载性能

1. 使用现代图片格式

AVIF 比 WebP 再小 20-30%，2026 年主流浏览器已全面支持：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" loading="lazy">
</picture>

2. 资源预加载关键路径

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

3. 代码分割

按路由分割是基础，更进一步按交互分割：

const HeavyChart = lazy(() => import("./HeavyChart"));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);
  return (
    <div>
      <button onClick={() => setShowChart(true)}>显示图表</button>
      {showChart && <Suspense fallback={<Spinner/>}><HeavyChart/></Suspense>}
    </div>
  );
}

4. 树摇优化

确保使用 ES Module 导入，避免全量引入：

// 差：引入整个库
import _ from "lodash";

// 好：只引入需要的函数
import debounce from "lodash/debounce";

5. 压缩一切

启用 Brotli 压缩（比 gzip 小 15-20%），Nginx 配置：

brotli on;
brotli_types text/plain text/css application/javascript application/json;
brotli_comp_level 6;

渲染性能

6. 避免布局抖动

读写 DOM 分离，使用 requestAnimationFrame：

// 差：强制同步布局
element.style.width = element.offsetWidth + 10 + "px";

// 好：读写分离
const width = element.offsetWidth;
requestAnimationFrame(() => {
  element.style.width = width + 10 + "px";
});

7. 虚拟滚动

长列表必备，只渲染可视区域的元素：

import { useVirtualizer } from "@tanstack/react-virtual";
// 10000 行数据只渲染可见的 20 行

8. CSS containment

告诉浏览器哪些区域可以独立渲染：

.card {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

9. 使用 CSS 动画替代 JS 动画

CSS 动画可以在合成器线程运行，不阻塞主线程。优先使用 transform 和 opacity。

10. Web Worker 处理重计算

const worker = new Worker("heavy-calc.js");
worker.postMessage(largeDataset);
worker.onmessage = (e) => updateUI(e.data);

网络优化

11. HTTP/3 + QUIC

2026 年的标配，减少连接建立时间。

12. Service Worker 缓存策略

区分 Cache First（静态资源）和 Network First（API 数据）。

13. 资源提示优先级

使用 fetchpriority 标记关键资源。

14. 减少第三方脚本

每个第三方脚本都是性能负担，定期审计。

15. 使用 103 Early Hints

服务器在处理请求时提前告知浏览器需要的资源。

度量与监控

16. Core Web Vitals

• LCP < 2.5s
• INP < 200ms
• CLS < 0.1

17. 真实用户监控（RUM）

别只看合成测试，关注真实用户数据。

18. 性能预算

设定并监控：JS < 200KB, CSS < 50KB, 图片 < 500KB。

19. Lighthouse CI

集成到 CI/CD，每次发版自动跑性能测试。

20. 竞品对比

定期和竞品做性能对比，知道自己的位置。

总结

性能优化不是一次性的工作，而是持续的实践。从度量开始，找到瓶颈，针对性优化，持续监控。记住：用户不关心你的技术栈有多先进，他们只关心页面够不够快。