如何监控页面卡顿

监控页面卡顿需要从 渲染性能指标采集 、数据分析 和 问题定位 三个维度进行。以下是完整的技术方案和实现细节：

一、核心监控指标

指标	阈值（毫秒）	说明
FPS（帧率）	<50 FPS	低于50帧可感知卡顿
Long Task	>50ms	阻塞主线程的任务
Input Delay	>100ms	用户交互到响应延迟
Layout Thrashing	>10次/秒	强制同步布局抖动

二、监控实现方案

FPS 帧率监控

javascript 复制代码

// 使用requestAnimationFrame计算FPS
let lastTime = performance.now();
let frameCount = 0;
const fpsList = [];

function checkFPS() {
  const now = performance.now();
  frameCount++;
  
  if (now > lastTime + 1000) {
    const fps = Math.round((frameCount * 1000) / (now - lastTime));
    fpsList.push(fps);
  
    if (fps < 50) {
      reportStutter({ fps, timestamp: now });
    }
  
    frameCount = 0;
    lastTime = now;
  }
  
  requestAnimationFrame(checkFPS);
}
checkFPS();

Long Task API

javascript 复制代码

// 监听长任务（需浏览器支持PerformanceObserver）
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      sendToAnalytics({
        type: 'long_task',
        duration: entry.duration,
        startTime: entry.startTime,
        stack: getJSStack() // 获取调用栈
      });
    }
  }
});
observer.observe({ entryTypes: ['longtask'] });

用户交互延迟

javascript 复制代码

// 监听点击到绘制的时间差
button.addEventListener('click', () => {
  const start = performance.now();
  
  requestAnimationFrame(() => {
    const delay = performance.now() - start;
    if (delay > 100) {
      reportDelay({ delay, element: button.tagName });
    }
  });
});

布局抖动检测

javascript 复制代码

// 检测强制同步布局
let layoutCount = 0;
setInterval(() => {
  if (layoutCount > 10) {
    reportThrashing({ count: layoutCount });
  }
  layoutCount = 0;
}, 1000);

const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = function() {
  layoutCount++;
  return originalGetBoundingClientRect.call(this);
};

三、数据分析与可视化

卡顿聚合报告

json 复制代码

{
  "page": "/checkout",
  "fps_avg": 43,
  "long_tasks": [
    {
      "duration": 267,
      "stack": "Button.click() > loadCart() > JSON.parse()"
    }
  ],
  "hotspots": [
    {"element": "#product-list", "layout_time": 1200}
  ]
}

**Chrome DevTools 集成

javascript 复制代码

// 生成性能时间轴日志
const timelineData = [];
function recordTimeline(event) {
  timelineData.push({
    type: event.type,
    timestamp: performance.now(),
    detail: event.detail
  });
  
  if (timelineData.length > 1000) {
    sendTimeline(timelineData);
    timelineData.length = 0;
  }
}

四、问题定位工具

调用栈分析

bash 复制代码

# 使用source-map解析压缩代码的堆栈
npx source-map-cli resolve bundle.js.map 1:1000

性能录制回放

javascript 复制代码

// 使用rrweb录制用户会话
import { record } from 'rrweb';
record({
  emit(event) {
    if (isStuttering(event)) {
      saveRecording(event);
    }
  }
});

实验室复现

javascript 复制代码

// Puppeteer自动化测试脚本
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.tracing.start({ screenshots: true, categories: ['devtools.timeline'] });
  await page.goto('https://example.com');
  await page.click('#problem-button');
  
  const trace = await page.tracing.stop();
  analyzeTrace(trace);
})();

五、优化建议

代码级优化

javascript 复制代码

// 反模式 vs 优化方案
// 反模式：频繁DOM操作
for (let i = 0; i < 100; i++) {
  element.style.width = i + 'px'; 
}

// 优化方案：使用requestAnimationFrame批量更新
function updateWidth(start, end) {
  requestAnimationFrame(() => {
    element.style.width = start + 'px';
    if (start < end) {
      updateWidth(start + 1, end);
    }
  });
}

架构优化

问题类型	解决方案
大量DOM节点	虚拟滚动（react-window / vue-virtual-scroller）
复杂计算阻塞	Web Worker 分流（如使用comlink简化通信）
样式重绘	使用CSS will-change属性提示浏览器优化

监控系统集成

graph TB A[前端SDK] -->|上报数据| B[Kafka] B --> C[Flink实时计算] C --> D[报警触发] C --> E[Grafana看板] E --> F[优化决策]

六、进阶方案

**Web Vitals 指标

javascript 复制代码

// 使用web-vitals库
import { getFID, getCLS, getLCP } from 'web-vitals';

getFID(console.log); // 首次输入延迟
getCLS(console.log); // 布局偏移量
getLCP(console.log); // 最大内容绘制

**React Profiler API

jsx 复制代码

<React.Profiler 
  id="CheckoutPage" 
  onRender={(id, phase, actualTime) => {
    if (actualTime > 30) {
      trackSlowRender(id, actualTime);
    }
  }}
>
  <CheckoutPage />
</React.Profiler>

**GPU渲染分析

javascript 复制代码

// 检测图层爆炸
const layers = [];
function checkLayers() {
  requestAnimationFrame(() => {
    document.querySelectorAll('*').forEach(el => {
      const layerType = getComputedStyle(el).willChange || 'none';
      layers[layerType] = (layers[layerType] || 0) + 1;
    });
  
    if (layers['transform'] > 50) {
      reportLayerOveruse(layers);
    }
  });
}

通过以上方案可以实现：

实时卡顿检测：毫秒级性能指标采集
精准定位：关联代码堆栈和用户操作路径
趋势分析：建立性能基线自动预警
优化验证：AB测试对比优化效果

实际部署时建议：

采样率控制：生产环境1%~10%用户采样
分级报警：根据卡顿严重程度分渠道通知
关联分析：将性能数据与业务指标（如转化率）关联