性能优化评估

刀刀

4/7/2025

0 字

0 分钟

分析性能问题，给出性能问题对应的解决方案，实施，建立完整的指标体系持续监控，持续优化。

指标体系建立

常规的指标，通过 Performance 、PerformanceObserver API 搭配 webvital 进行计算。

还有一些自定义指标可以通过其他方法计算：

• DNS 查询时间
• 资源加载时间： MutationObserver 计算 DOM 树加载花费的时间
• 长任务时间：主线程占用时长超过 50ms

TTFB（Time to First Byte）

获取首字节到达时间：

const { timing } = performance;
const ttfb = timing.responseStart - timing.requestStart;
console.log("TTFB:" + ttfb + "ms");

FP（First Paint）

通过 PerformanceObserver 监听 FP：

const paintEntries = performance.getEntriesByType("paint");
paintEntries.forEach((entry) => {
  console.log(entry.name + ":" + entry.startTime + "ms");
});

LCP（Largest Contentful Paint）

通过 PerformanceObserver 监听 LCP：

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    console.log("LCP:" + entry.startTime + "ms");
  });
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

CLS（Cumulative Layout Shift）

通过 PerformanceObserver 监听 CLS：

let clsValue = 0;
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  });
});

observer.observe({ type: "layout-shift", buffered: true });
window.addEventListener("load", () => {
  console.log("CLS:", clsValue);
});

性能指标采集

1. 常规指标采集：Performance 、 PerformanceObserver API 和 webvital

2. 自定义指标，FMP 通过 MutationObserver API 来自定义计算

3. 额外指标：首字节、服务端上报【xhr 上报（可能会有跨域问题）、图片上报】

   • 实时上报：关键指标如 LCP、CLS 需要实时上报，确保及时监控
   • 对非关键指标，利用定时任务进行批量上报，减少网络开销（下方示例代码）

   const metricsBuffer = [];
   function addMetricsBuffer(name, value) {
     metricsBuffer.push({ name, value, timestamp: Date.now() });
     if (metricsBuffer.length > 10) {
       flushMetrics();
     }
   }
   function flushMetrics() {
     fetch("/api/report-metrics", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(metricsBuffer),
     });
     metricsBuffer.length = 0; // 清空
   }

性能评估

基准策略

1. 确定目标设备和网络环境
   • 测试覆盖范围包括：高端、中端、低端设备，4G、3G、弱网络环境
   • 模拟弱网：使用 Chrome DevTools 的 Network Throttling 功能
2. 基准值定义：根据行业标准和历史数据定义性能基准（如 LCP<2.5s、CLS<0.1）

实时监控和预警

1. 监控工具
   • 实时采集生产环境用户的性能数据，形成可视化仪表盘
   • 自动化报警：当性能指标超出设定阈值时触发预警
2. 定期性能报告：周期性生成性能分析报告（如每周/月），跟踪优化进展

问题定位

1. 数据采集：对比不同设备、浏览器、地理位置的数据，定位性能瓶颈
2. 分析阻塞任务：使用 Chrome DevTools 找出阻塞主线程的长任务，优化代码