通过puppeteer搭建性能指标平台

背景：之前项目是在前端代码植入插件获取performance, PerformanceObserver,tti-polyfill,first-input-delay。再通过analytics采集数据。虽然也能得到可观的数据 但是每次更新都需要手动执行一遍，不是很方便。
可以看下之前关于插件获取指标数据的文章

关于puppeteer安装

1. timing获取

const puppeteer = require("puppeteer-core");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const performanceTiming = JSON.parse(
    await page.evaluate(() => {
//这里获取的就是window.performance.timing
      return JSON.stringify(window.performance.timing);
    })
  );
})();

window.performance.timing介绍

PerformanceObserver 本来是用来获取fcp和FP的 这个在page.tracing可以获取 所以就不统计这个了。

2. tti和fid

待获取。

3指标数据获取

// Timestamp  时间点(when the metrics sample was taken)
// Documents  页面的documents数量。
// Frames  页面的iframe数量。
// JSEventListeners  页面的js事件数量。
// Nodes  页面的dom节点数量。
// LayoutCount  整页面或部分页面的布局数量。
// RecalcStyleCount  页面样式重新计算数量。
// LayoutDuration  页面布局总时间。
// RecalcStyleDuration  页面样式重新计算总时间。
// ScriptDuration  页面js代码执行总时间。
// TaskDuration  页面任务执行总时间。
// JSHeapUsedSize  页面占用堆内存大小。
// JSHeapTotalSize  总的页面堆内存大小。
//直接获取
  const performanceMetrics = await page.metrics();
//通过devtools协议获取  page.metrics应该是封装了这个协议实现关键指标的数据获取。
 const client = await page.target().createCDPSession();
  await client.send("Performance.enable");
await client.send("Performance.getMetrics");

window.performance.timing是由W3C维护的浏览器不可知测量标准(agnostic measure standard)，所有的浏览器都应该有相同的API。而这里性能指标数据是Chrome浏览器的特定指标，这里指标数据更广一点。
window.performance 是定义在js引擎里的。这里指标数据是在浏览器层面执行的，两边获得的数据会存在差异性。

4. performance面板数据获取

这个主要通过tracing获取追踪文件。
生成的json数据和在chromedevtool的performance获取的数据是一样的。

const puppeteer = require('puppeteer-core');

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

  await page.tracing.start({path: 'trace.json',screenshots:true});
  await page.goto('http://10.10.38.197:9025/puppeteer/puppeteer.html');
  await page.tracing.stop();
  
  await browser.close();
})();

通过解析json数据可以获得上面各个接口获取的数据。不过这个数据量很大，如果要求性能指标可以通过上面提到api获取，就不要去追踪生成json了。或者从json保存完想要的数据后，定时清理json文件。

5. 模拟network 和cpu

  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  const client = await page.target().createCDPSession()
  const {Regular3G} = require('./network-presets')
  // emulate 3g network
  await client.send('Network.emulateNetworkConditions', Regular3G)
  // throttle cpu
  await client.send('Emulation.setCPUThrottlingRate', { rate: 4 })
await page.goto("http://10.10.38.197:9025/puppeteer/puppeteer.html");
  
const performanceTiming = JSON.parse(
    await page.evaluate(() => {
      return JSON.stringify(window.performance.timing);
    })
  ); 
  const result = extractDataFromPerformanceTiming(
    performanceTiming,
    "responseEnd",
    "domInteractive",
    "domContentLoadedEventEnd",
    "loadEventEnd"
  );
console.log(" performanceTiming=", result);

设置3g返回结果
 performanceTiming= { responseEnd: 257,
  domInteractive: 562,
  domContentLoadedEventEnd: 562,
  loadEventEnd: 562 }

未设置3g返回结果
 performanceTiming= { responseEnd: 24,
  domInteractive: 44,
  domContentLoadedEventEnd: 44,
  loadEventEnd: 45 }

可以看到区别还是挺大的

后面再更新下性能数据的抓取和性能指标可视化。

参考