Puppeteer – 性能评估

2019年8月30日

意见反馈

可以使用Puppeteer评估网站性能，分析页面的加载速度和响应速度等性能指标。

1. 评估加载时间

页面导航和加载时间等指标，可以通过window.performance访问。

注意关于window.performance详细介绍，可参考导航计时。

示例

Puppeteer中，访问window.performance。

const puppeteer = require('puppeteer');

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

  await page.goto('https://pptr.dev');
  await page.waitForSelector('title');

  // 在页面上下文中执行导航API
  const metrics = await page.evaluate(() => JSON.stringify(window.performance));

  // 将结果解析为JSON
  console.info(JSON.parse(metrics));

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

输出:

{ timeOrigin: 1567157242793.045,
  timing:
   { navigationStart: 1567157242793,
     unloadEventStart: 0,
     unloadEventEnd: 0,
     redirectStart: 0,
     redirectEnd: 0,
     fetchStart: 1567157242793,
     domainLookupStart: 1567157242880,
     domainLookupEnd: 1567157242908,
     connectStart: 1567157242908,
     connectEnd: 1567157243229,
     secureConnectionStart: 1567157242914,
     requestStart: 1567157243229,
     responseStart: 1567157243238,
     responseEnd: 1567157243289,
     domLoading: 1567157243244,
     domInteractive: 1567157246390,
     domContentLoadedEventStart: 1567157246390,
     domContentLoadedEventEnd: 1567157246395,
     domComplete: 1567157246953,
     loadEventStart: 1567157246953,
     loadEventEnd: 1567157246954 },
  navigation: { type: 0, redirectCount: 0 } }

现在，通过这些指标(指标说明)，就可以计算各种加载时间，例如，loadEventEnd - navigationStart表示从导航开始到页面加载完成的时间。

2. 运行时指标

Puppeteer中要获取页面的运行时指标，可以使用Page.metrics方法。

const puppeteer = require('puppeteer');

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

  await page.goto('https://pptr.dev');
  await page.waitForSelector('title');

  // 返回页面的运行时指标
  const metrics = await page.metrics();
  console.info(metrics);

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

结果:

{
  Timestamp: 1327432.660694, //调用metrics方法时间戳
  Documents: 17, //文档数量
  Frames: 7, //frame数量
  JSEventListeners: 61, //事件的数量
  Nodes: 2650, // DOM元素的数量
  LayoutCount: 10, //页面布局的数量
  RecalcStyleCount: 24, //页面样式重新计算的次数
  LayoutDuration: 0.145065, //所有页面布局的总持续时间
  RecalcStyleDuration: 0.02759, //所有页面样式重新计算的总持续时间
  ScriptDuration: 0.425575, // JavaScript执行的总时间
  TaskDuration: 0.744677, //浏览器执行的所有任务的总持续时间
  JSHeapUsedSize: 16177616, // JavaScript实际内存使用情况
  JSHeapTotalSize: 22986752  // JavaScript使用的内存总量，包括空闲分配的空间
}

这些结果实际上是Performance.getMetrics的输出，Performance.getMetrics是Chrome DevTools协议的一部分。

3. 通过Chrome跟踪分析浏览器活动

Chrome跟踪是一种分析工具，记录浏览器的幕后活动，包括浏览器中线程、选项卡和进程等相关信息。Chrome跟踪获取的信息可在Chrome DevTools的时间轴面板中查看。

Puppeteer中，要使用Chrome跟踪功能，可以使用Page.tracing对象。

下面的例子，记录浏览器在导航过程中的活动:

const puppeteer = require('puppeteer');

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

  // 开始跟踪
  await page.tracing.start({ path: 'trace.json' });

  await page.goto('https://www.qikegu.com');
  await page.waitForSelector('title');

  // 结束跟踪
  await page.tracing.stop();

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

运行脚本，跟踪记录会保存为trace.json文件，部分内容如下所示：

{"traceEvents":[{"pid":27264,"tid":15352,"ts":1328517061221,"ph":"X","cat":"toplevel","name":"ThreadControllerImpl::RunTask","dur":411,"args":{}},
{"pid":27264,"tid":15352,"ts":1328517061651,"ph":"X","cat":"toplevel","name":"ThreadControllerImpl::RunTask","dur":4,"args":{}},
{"pid":27264,"tid":15352,"ts":1328517061704,"ph":"X","cat":"toplevel","name":"ThreadControllerImpl::RunTask","dur":4,"args":{}},
{"pid":27264,"tid":15352,"ts":1328517061710,"ph":"X","cat":"toplevel","name":"ThreadControllerImpl::RunTask","dur":3,"args":{}},
{"pid":27264,"tid":15352,"ts":1328517061752,"ph":"X","cat":"toplevel","name":"ThreadControllerImpl::RunTask","dur":4,"args":{}},
{"pid":27264,"tid":15352,"ts":1328517061758,"ph":"X","cat":"toplevel","name":"ThreadControllerImpl::RunTask","dur":3,"args":{}},

...

可在Chrome DevTools的时间轴面板中查看跟踪信息：使用chrome浏览器打开网址chrome://tracing，然后加载trace.json文件。

下面是将跟踪文件导入DevTools后的图形化数据: