使用Puppeteer如何獲取DOMContentLoaded，加載時間

Question

使用Puppeteer如何獲取DOMContentLoaded，加載時間。 如果曾經有人可以解釋如何從Puppeteer訪問開發工具對象Network，那將是很好的。

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之間的差，這是一個完整的示例（代碼來自本文 ）：

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();
})();