Question

使用Puppeteer如何获得DOMContentLoaded，加载时间。如果有人能够解释如何访问开发工具对象，来自Puppeteer的网络，那将是很棒的。

Answer 1

可能你问的是window.performance.timing，这里有一个简单的例子，说明如何在Puppeteer中获取这些数据：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://en.wikipedia.org');

  const performanceTiming = JSON.parse(
    await page.evaluate(() => JSON.stringify(window.performance.timing))
  );
  console.log(performanceTiming);

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

但结果非常原始，没有意义。你应该计算每个值和navigationStart之间的差异，这里有一个如何做的完整示例（代码来自这个article）：

const puppeteer = require('puppeteer');

const extractDataFromPerformanceTiming = (timing, ...dataNames) => {
  const navigationStart = timing.navigationStart;

  const extractedData = {};
  dataNames.forEach(name => {
    extractedData[name] = timing[name] - navigationStart;
  });

  return extractedData;
};

async function testPage(page) {
  await page.goto('https://en.wikipedia.org');

  const performanceTiming = JSON.parse(
    await page.evaluate(() => JSON.stringify(window.performance.timing))
  );

  return extractDataFromPerformanceTiming(
    performanceTiming,
    'domContentLoadedEventEnd',
    'loadEventEnd'
  );
}

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  console.log(await testPage(page));
  await browser.close();
})();

使用Puppeteer我如何获得DOMContentLoaded，加载时间

1 个答案: