Puppeteer獲取performance timing

原文鏈接：https://michaljanaszek.com/blog/test-website-performance-with-puppeteer

網站性能測試

Navigation Timing API

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

執行結果：

{ 
  navigationStart: 1542351938984, 
  unloadEventStart: 0,
  unloadEventEnd: 0,
  redirectStart: 0,
  redirectEnd: 0,
  fetchStart: 1542351938984,
  domainLookupStart: 1542351938985,
  domainLookupEnd: 1542351938988,
  connectStart: 1542351938988,
  connectEnd: 1542351939095,
  secureConnectionStart: 1542351939016,
  requestStart: 1542351939095,
  responseStart: 1542351939139,
  responseEnd: 1542351939140,
  domLoading: 1542351939150,
  domInteractive: 1542351940014,
  domContentLoadedEventStart: 1542351940014,
  domContentLoadedEventEnd: 1542351940064,
  domComplete: 1542351942626,
  loadEventStart: 1542351942626,
  loadEventEnd: 1542351942626 
}

具體說明見：performance.timing

優化只獲取想得到的數據，將時間戳顯示爲毫秒

①index.js

const puppeteer = require('puppeteer');
const testPage = require('./testPage');

(async () => {
  const browser = await puppeteer.launch({
    ignoreHTTPSErrors: true,
    headless: false,
  });
  const page = await browser.newPage();
  console.log(await testPage(page));
  await browser.close();
})();

②testPage.js

const { extractDataFromPerformanceTiming } = require('./helpers');
async function testPage(page) {
  await page.goto('https://easinote.seewo.com/activity/giveCourse');
  const performanceTiming = JSON.parse(
    await page.evaluate(() => JSON.stringify(window.performance.timing))
  );
  return extractDataFromPerformanceTiming(
    performanceTiming,
    'responseEnd',
    'domInteractive',
    'domContentLoadedEventEnd',
    'loadEventEnd'
  );
}
module.exports = testPage;

③helpers.js

const extractDataFromPerformanceTiming = (timing, ...dataNames) => {
    const navigationStart = timing.navigationStart;
    const extractedData = {};
    dataNames.forEach(name => {
      extractedData[name] = timing[name] - navigationStart;
    });
    return extractedData;
  };
  module.exports = {
    extractDataFromPerformanceTiming,
  };

node index.js執行結果：

{ 
  responseEnd: 465,
  domInteractive: 1488,
  domContentLoadedEventEnd: 1596,
  loadEventEnd: 2665 
}