我需要更多关于 Puppeteer page.metrics 和 queryObjects 的信息

Question

我正在使用 Puppeteer to find a memory leak issue. I'm using puppeteer's page.metrics() API，但我无法理解每个属性的含义。随着时间的推移，我在指标中的所有价值都在不断增加。这是预期的吗？或者这是否表明可能存在严重的内存泄漏？

随着应用程序的运行而增值的属性是： JSEventListeners, Nodes, LayoutCount, RecalcStyleCount, LayoutDuration, RecalcStyleDuration, ScriptDuration, TaskDuration, JSHeapUsedSize, JSHeapTotalSize

关于这个东西的信息非常少，而且我经常看到人们将 page.queryObjects 称为另一种查找内存泄漏的方法。但是我找不到任何关于如何使用这个 API 和寻找什么的信息。

Answer 1

根据 Puppeteer Documentation:

page.metrics()

• returns: <Promise<Object>> Object containing metrics as key/value pairs.
  • Timestamp <number> The timestamp when the metrics sample was taken.
  • Documents <number> Number of documents in the page.
  • Frames <number> Number of frames in the page.
  • JSEventListeners <number> Number of events in the page.
  • Nodes <number> Number of DOM nodes in the page.
  • LayoutCount <number> Total number of full or partial page layout.
  • RecalcStyleCount <number> Total number of page style recalculations.
  • LayoutDuration <number> Combined durations of all page layouts.
  • RecalcStyleDuration <number> Combined duration of all page style recalculations.
  • ScriptDuration <number> Combined duration of JavaScript execution.
  • TaskDuration <number> Combined duration of all tasks performed by the browser.
  • JSHeapUsedSize <number> Used JavaScript heap size.
  • JSHeapTotalSize <number> Total JavaScript heap size.

NOTE All timestamps are in monotonic time: monotonically increasing time in seconds since an arbitrary point in the past.

page.queryObjects(prototypeHandle)

• prototypeHandle <JSHandle> 对象原型的句柄。
• returns: <Promise<JSHandle>> Promise 解析为具有此原型的对象数组的句柄。

该方法迭代 JavaScript 堆并找到具有给定原型的所有对象。

// Create a Map object
await page.evaluate(() => window.map = new Map());
// Get a handle to the Map object prototype
const mapPrototype = await page.evaluateHandle(() => Map.prototype);
// Query all map instances into an array
const mapInstances = await page.queryObjects(mapPrototype);
// Count amount of map objects in heap
const count = await page.evaluate(maps => maps.length, mapInstances);
await mapInstances.dispose();
await mapPrototype.dispose();

page.mainFrame().executionContext().queryObjects(prototypeHandle) 的快捷方式。

---

page.metrics() 方法 returns Chrome DevTools 协议的结果 Performance.getMetrics:

Performance.getMetrics

Retrieve current values of run-time metrics.

RETURN OBJECT

• metrics array Metric
  • Current values for run-time metrics.

另一方面，page.queryObjects() 方法附带的 Chrome DevTools 协议是 Runtime.queryObjects:

Runtime.queryObjects

PARAMETERS

• prototypeObjectId RemoteObjectId
  • Identifier of the prototype to return objects for.
• objectGroup string (optional)
  • Symbolic group name that can be used to release the results.

RETURN OBJECT

• objects RemoteObject
  • Array with objects.

---

page.matrics() and page.queryObjects() 的源代码可以在 GitHub 上找到。