使用 Puppeteer 如何获取 DOMContentLoaded、加载时间答案

【问题标题】：Using Puppeteer how can I get DOMContentLoaded, Load time使用 Puppeteer 如何获取 DOMContentLoaded、加载时间
【发布时间】：2018-06-08 23:05:56
【问题描述】：

使用 Puppeteer 如何获取 DOMContentLoaded、加载时间。如果有人能解释如何从 Puppeteer 访问开发工具对象 Network，那就太好了。

【问题讨论】：

标签： puppeteer

【解决方案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();
})();

【讨论】：