如何获取全部INP数据？PerformanceObserver无法返回低值

1. 使用Chrome DevTools Protocol (CDP) 录制Trace #

这是获取和DevTools性能面板完全一致数据的最可靠方式——性能面板本身就是基于CDP的Trace数据渲染的。你可以通过Puppeteer这类工具实现：

• 启动浏览器并开启Trace录制，指定包含交互事件的核心类别
• 完成目标操作后停止录制，导出JSON格式的Trace数据
• 解析JSON文件，过滤出所有交互相关的事件条目

示例代码（基于Puppeteer）：

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 启动Trace，覆盖交互、用户计时等核心类别
  await page.tracing.start({
    categories: [
      'blink.user_timing',
      'disabled-by-default-devtools.timeline',
      'devtools.timeline',
      'v8'
    ],
    path: 'full-interaction-trace.json'
  });

  // 模拟用户交互或等待页面操作
  await page.goto('你的目标页面URL');
  await page.click('目标元素选择器'); // 比如模拟点击按钮

  // 停止Trace录制
  await page.tracing.stop();

  // 读取并解析Trace数据
  const traceData = JSON.parse(fs.readFileSync('full-interaction-trace.json', 'utf8'));
  // 过滤出交互事件（根据事件类别和名称筛选）
  const interactionEvents = traceData.traceEvents.filter(event => 
    event.cat.includes('devtools.timeline') && 
    (event.name === 'MouseEvent' || event.name === 'KeyEvent' || event.name.startsWith('UserInteraction'))
  );

  console.log('完整交互列表:', interactionEvents);

  await browser.close();
})();

解析后的interactionEvents会包含每个交互事件的开始时间、持续时长、事件类型、目标元素信息等，和性能面板展示的内容完全对应。

2. 扩展PerformanceObserver的监听范围 #

如果不需要完全复刻性能面板的所有数据，仅需获取关键交互事件，可以尝试扩展PerformanceObserver的监听类型，同时结合自定义性能标记：

• 监听'event'类型的PerformanceEntry，同时注册'mark'和'measure'类型
• 对关键用户交互手动添加自定义标记，方便后续追踪

示例代码：

// 创建PerformanceObserver实例
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 过滤并收集交互事件
    if (entry.entryType === 'event') {
      console.log('交互事件:', {
        name: entry.name,
        startTime: entry.startTime,
        duration: entry.duration
      });
    }
  }
});

// 监听所有相关的entry类型
observer.observe({ entryTypes: ['event', 'mark', 'measure'] });

// 手动标记关键交互（可选）
document.querySelector('#target-button').addEventListener('click', () => {
  performance.mark('button-click-start');
  // 执行目标操作
  performance.measure('button-click-duration', 'button-click-start');
});

注意：这种方式无法获取性能面板里的所有底层零散事件，因为部分低级别事件不会被Performance API暴露，只能通过CDP Trace获取。

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