如何用Puppeteer测量从交互到浏览器完成绘制的时间？

原方法失效原因 #

你的代码测量结果偏长主要有三个问题：

• 额外延迟引入：嵌套的setTimeout会添加不确定的宏任务延迟，完全没必要，直接导致测量值被拉长。
• 时机不对：requestAnimationFrame的回调是在当前帧绘制前执行的，此时浏览器还没完成Paint和Composite阶段，你标记的test_end实际早于渲染流水线完成时间。
• 跨进程延迟：page.evaluate()打标记和page.click()是两个独立的异步操作，中间存在Puppeteer与浏览器的进程通信延迟，导致test_start的标记时间早于点击实际触发的时间，进一步扩大误差。

最优实现方案 #

要覆盖完整渲染流水线（JavaScript → Style → Layout → Paint → Composite），可以利用双重requestAnimationFrame+同上下文标记的方式，确保等待到合成阶段完成：

const measureDuration = await page.evaluate((selector) => {
  return new Promise((resolve) => {
    // 在点击前立即打开始标记，避免跨进程延迟
    performance.mark('test_start');
    document.querySelector(selector).click();

    // 第一个rAF：等待当前帧的布局、绘制阶段开始前
    requestAnimationFrame(() => {
      // 第二个rAF：等待当前帧的所有渲染步骤（包括Composite）完成
      requestAnimationFrame(() => {
        performance.mark('test_end');
        const measure = performance.measure('full_render', 'test_start', 'test_end');
        resolve(measure.duration);
        // 清理标记，避免影响后续测量
        performance.clearMarks('test_start');
        performance.clearMarks('test_end');
        performance.clearMeasures('full_render');
      });
    });
  });
}, selectorSort);

console.log(`完整渲染耗时：${measureDuration}ms`);

原理说明 #

• 把点击和开始标记放在同一个page.evaluate()里，彻底消除Puppeteer与浏览器的进程通信延迟，保证标记时机准确。
• 第一个requestAnimationFrame确保等待到浏览器开始处理当前更新的帧；第二个requestAnimationFrame会在当前帧的所有渲染步骤（包括Composite）完成后触发，此时才是真正的渲染完成时机。

更简便的替代方法：简化Tracing使用 #

如果你觉得手动处理时机太麻烦，可以用Puppeteer的Tracing API，只启用必要的性能类别，然后提取关键指标，操作其实没那么复杂：

// 启动Tracing，只收集必要的渲染相关数据
await page.tracing.start({
  path: 'render_trace.json',
  categories: ['devtools.timeline', 'blink.user_timing', 'v8', 'cc', 'disabled-by-default-devtools.timeline.frame']
});

// 执行点击操作
await page.click(selectorSort);

// 等待渲染完成（用双重rAF确保）
await page.evaluate(() => {
  return new Promise(resolve => {
    requestAnimationFrame(() => requestAnimationFrame(resolve));
  });
});

// 停止Tracing并解析结果
await page.tracing.stop();

// 解析trace文件提取帧耗时（Node.js环境）
const fs = require('fs');
const traceData = JSON.parse(fs.readFileSync('render_trace.json', 'utf8'));
const frameEvents = traceData.traceEvents.filter(e => e.name === 'BeginFrame' && e.cat.includes('frame'));
const renderDuration = frameEvents[frameEvents.length - 1].dur / 1000; // 转换为ms
console.log(`帧渲染耗时：${renderDuration}ms`);

这种方法能直接拿到浏览器底层的渲染帧数据，准确性更高，适合需要深入分析渲染瓶颈的场景。

内容的提问来源于stack exchange，提问作者Kassandra30