Puppeteer – 性能评估

可以使用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.getMetricsChrome 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后的图形化数据:

图



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载