Web性能优化实战：前端资源加载与渲染性能提升方案

Web性能优化直接影响用户留存与转化率。前端性能问题大多集中在资源加载与页面渲染两个环节：资源体积大、请求链路过长、渲染阻塞都会拉长首屏时间。本文按「测量-定位-优化」的顺序，给出资源加载、代码分割、渲染性能三方面的实操方案，每个环节都附带可运行的代码示例。

先建立性能基准再谈优化

优化前先用 Lighthouse 或 Performance API 采集页面关键指标：FCP、LCP、CLS、TTI。没有基准数据，优化效果无法量化。LCP 超过 2.5 秒、CLS 超过 0.1 就属于需要优先处理的水平。

// 采集真实用户性能数据
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime, entry.duration);
  }
}).observe({type: "largest-contentful-paint", buffered: true});

线上环境用 PerformanceObserver 把 LCP、FID 等指标上报到监控平台，持续跟踪优化前后变化。

资源加载优化：体积与请求数两手抓

静态资源是首屏性能的最大变量。做法分三层：压缩代码与图片、拆分大包、延迟非关键资源。

// Vite 配置示例：拆包与 gzip
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          antd: ["antd"],
        },
      },
    },
  },
});

图片使用 AVIF/WebP 格式并配 srcset 响应式尺寸，首屏只加载关键图片，其余用 loading=”lazy” 延迟加载。字体用 font-display: swap 避免文本隐藏阻塞。

渲染性能优化：减少主线程负担

主线程被长任务占满时，页面滚动、点击都会卡顿。长列表渲染用虚拟滚动，复杂计算用 Web Worker 移到后台线程，减少不必要的 re-render。

import { useMemo } from "react";

// 避免每次渲染重复计算
const filtered = useMemo(
  () => items.filter(item => item.keywords.includes(keyword)),
  [items, keyword]
);

// 长任务交给 Worker，主线程不阻塞
const worker = new Worker(new URL("./heavy.worker.js", import.meta.url));
worker.postMessage({ type: "process", data });

用 React DevTools Profiler 检查组件重渲染次数，对频繁重渲染的组件加 memo 或把状态下放。CSS 动画尽量用 transform 和 opacity，避免触发布局与绘制。

关键渲染路径优化：减少阻塞

render-blocking 资源会让首屏等待。内联首屏 CSS，用 preload 提前加载关键字体与图片，异步加载非关键脚本。

<link rel="preload" href="/font/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<script type="module" src="/main.js" defer></script>

把不影响首屏渲染的 JS 全部改成 defer 或异步加载，减少解析与执行阻塞。SSR 场景要注意水合时间，避免服务端渲染完还要客户端重复执行。

性能优化的验收与监控

优化完成对比优化前后的 Lighthouse 分数与真实用户指标。建立性能预算：包体积超限构建失败、LCP 超时触发告警。用真实用户监控（RUM）持续追踪，避免优化上线后回退。