在 Playwright 或 Puppeteer 中捕获 FPS 下降对于性能测试有用吗？

Question

我很好奇，在 Playwright/Puppeteer 测试套件中运行 FPS 计数器（当 FPS 降至阈值（例如 60fps）以下时抛出）是否是一个有用的金丝雀，可以在界面的一部分需要性能工作时发出警报。

这是我想在浏览器上下文中实现的 FPS 计数器之类的示例：

// Options
const decimalPlaces    = 2;
const updateEachSecond = 1;

// Cache values
const decimalPlacesRatio = Math.pow(10, decimalPlaces);
let timeMeasurements     = [];

// Final output
let fps = 0;

const tick = function() {
  timeMeasurements.push(performance.now());

  const msPassed = timeMeasurements[timeMeasurements.length - 1] - timeMeasurements[0];

  if (msPassed >= updateEachSecond * 1000) {
    fps = Math.round(timeMeasurements.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
    timeMeasurements = [];
  }

  if ( fps > 60 ) {
      // Throw to Puppeteer or Playwright
  }

  requestAnimationFrame(() => {
    tick();
  });
}

tick();

原文：https://stackoverflow.com/a/52727222/1397641

理想情况下，我希望在尽可能多的测试中有一个 FPS 计数器，它可以在部署给用户之前告诉我用户体验的一部分何时太慢。

我知道使用 Performance.now() 比 Date.now() 更好，但我不确定如何确保测试环境与目标用户设备相似或稍慢。

例如： 在 Netlify 或 Vercel 等构建流程上运行的 puppeteer 是否可以与 5 年前的 Android 设备等用户设备相媲美？

我可以添加节流阀来使测试更加真实，甚至不如用户设备那么强大，以便 FPS 测试比用户设备稍早失败吗？

Answer 1

它可能有用，具体取决于您正在测试的应用程序/网站的类型。这样的功能可能不需要默认启用。如何实施：

1. https://pptr.dev/api/puppeteer.page.exposefunction/ 公开与目标页面的绑定以报告 fps 下降。
2. https://pptr.dev/api/puppeteer.page.evaluateonnewdocument/ 在执行其他操作之前加载 fps 测量代码。
3. https://pptr.dev/api/puppeteer.page.emulatecputhrotdling/ 使页面变慢。虽然不确定这有多现实。