等待HTML内容测量第一个内容丰富的绘画

问题描述

我对设计一个测试页面感兴趣，该页面将生成带有图像（大小，数量和扩展名不同）的HTML页面。我知道可以通过使用Puppeter's setContent中的自定义HTML字符串来设置页面的内容。但是，我想从这个新生成的页面中收集First Contentful Paint。该算法将类似于以下内容：

const puppeteer = require('puppeteer');

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

  page.goto('file://path/to/empty.html');

  await navigationPromise;

  page.setContent(`[ Custom HTML String ]`);

  // I would like to measure this after the HTML changes
  const firstContentfulPaint = JSON.parse(
    await page.evaluate(() =>
      JSON.stringify(performance.getEntriesByName('first-contentful-paint'))
    )
  );

  console.log(`First paint: ${firstContentfulPaint[0].startTime}`);

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

有什么建议吗？

解决方法

您可以尝试使用LightHouse API的预算来收集与之相关的数据， https://web.dev/use-lighthouse-for-performance-budgets/

javascript paint