I'm using puppeteer's page.metrics() which calls the DevTools protocol Performance.getMetrics() Here is a sample of the returned data :
{
Timestamp: 672.244221,
Documents: 3,
Frames: 2,
JSEventListeners: 2,
Nodes: 4116,
LayoutCount: 3,
RecalcStyleCount: 2,
LayoutDuration: 0.136179,
RecalcStyleDuration: 0.027681,
ScriptDuration: 0.188817,
TaskDuration: 0.563811,
JSHeapUsedSize: 2959520,
JSHeapTotalSize: 5132288
}
The only documentation i could find for these numbers is in puppeteer's documentation and it is basically this:
- Timestamp The timestamp when the metrics sample was taken.
- Documents Number of documents in the page.
- Frames Number of frames in the page.
- JSEventListeners Number of events in the page.
- Nodes Number of DOM nodes in the page.
- LayoutCount Total number of full or partial page layout.
- RecalcStyleCount Total number of page style recalculations.
- LayoutDuration Combined durations of all page layouts.
- RecalcStyleDuration Combined duration of all page style recalculations.
- ScriptDuration Combined duration of JavaScript execution.
- TaskDuration Combined duration of all tasks performed by the browser.
- JSHeapUsedSize Used JavaScript heap size.
- JSHeapTotalSize Total JavaScript heap size.
I would really like to get more details regarding these numbers, and specifically to answer these questions:
TaskDuration is significantly larger then the sum of ScriptDuration, LayoutDuration and RecalculateStyleDuration
- Where was the rest of the time wasted ?
- What other measurements i can take to account for that missing time ?
What are documents and frames ?