前端性能监控与体验优化实战

浏览器渲染页面的流程是：解析 HTML 构建 DOM 树 → 解析 CSS 构建 CSSOM 树 → 合并成渲染树 → 布局（Layout）→ 绘制（Paint）→ 合成（Composite）。优化渲染就是缩短这条路径。

// 长任务拆分：避免阻塞主线程
function processLargeData(data) {
    // 不要一次性处理全部数据
    // 用 setTimeout 或 requestIdleCallback 分片
    const chunkSize = 100;
    let index = 0;

    function next() {
        const chunk = data.slice(index, index + chunkSize);
        chunk.forEach(processItem);
        index += chunkSize;
        if (index < data.length) {
            setTimeout(next, 0);  // 让出主线程
        }
    }
    next();
}

// 虚拟列表：只渲染可视区域的 DOM
// 适合长列表场景，比如 1000 条数据的表格
// 库：react-window 或 vue-virtual-scroller

CLS 优化最有效的手段是给图片和广告位设固定宽高：<img width="800" height="400">。这样浏览器在图片加载前就预留好空间，不会加载完突然把下面的内容挤下去。

性能预算就是给页面设一个资源大小上限——比如首屏 JS 不超过 200KB、图片不超过 500KB。超了就在 CI 里报警，阻止合并。

// package.json 里加性能预算（Vite 项目）
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
        }
      }
    },
    chunkSizeWarningLimit: 200  // chunk 超过 200KB 警告
  }
}

// 用 bundlesize 工具在 CI 里检查
// .bundlesize.yml
- path: dist/assets/*.js
  maxSize: 200KB
- path: dist/assets/*.css
  maxSize: 50KB

性能预算的价值在于防止退化——不是一次性优化完就不管了，而是每次加新功能时自动检查有没有让页面变重。没有预算的项目，性能只会随时间越来越差。

实验室数据（Lighthouse）和真实用户数据（RUM）是两回事。Lighthouse 在干净环境跑，RUM 收集的是真实用户在各种设备和网络下的数据。两者都要看。

// 用 web-vitals 库收集真实用户指标
import { getLCP, getINP, getCLS } from 'web-vitals';

function sendToAnalytics(metric) {
    // 发送到你的监控后端
    navigator.sendBeacon('/api/perf', JSON.stringify({
        name: metric.name,
        value: metric.value,
        id: metric.id
    }));
}

getLCP(sendToAnalytics);
getINP(sendToAnalytics);
getCLS(sendToAnalytics);

把收集到的指标按用户分群（设备、网络、地区）聚合，就能发现"安卓低端机上 LCP 特别慢"这类问题。设一个告警阈值——比如 P75 LCP 超过 4 秒就通知开发团队。

性能优化是持续过程：测量 → 定位瓶颈 → 优化 → 监控 → 发现退化 → 再优化。没有终点。