Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When does "Start profiling and reload page" decide to stop the automatic recording?

I use the Performance Timeline in Chrome DevTools quite a lot to capture performance recordings of my page.

Most of the time I use the "Start profiling and reload page", which automatically starts and stops the recording.

The question is: When does DevTools decide to stop the recording?

I've noticed that it always continues to record at least a few hundred ms past the "Load"-event and tries to figure out when the page has gone "mostly idle".

But that's quite a fuzzy guess. I'd love to know if it relies on some performance event (like the one used in "time to interactive" in Lighthouse)?

like image 508
Drkawashima Avatar asked Jan 20 '19 16:01

Drkawashima


People also ask

What is profiling in Chrome?

Recording Website's Load Performance If you want to measure how your website loads, you can click the Start profiling and reload the page button next to the Record button. This will record what is going on and below the page while it's being loaded.

What is idle time in Chrome performance?

This is idle time, the time when the browser is waiting on the CPU or GPU to do some processing. It is shown in the pie chart screenshot in the documentation page How to Use the Timeline Tool.

How do I view performance profile in Chrome?

To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.


1 Answers

Currently it waits for three seconds after load event.
This is not documented so it may change in the future without notice.

this._millisecondsToRecordAfterLoadEvent = 3000;

async _loadEventFired(event) {
  if (this._state !== Timeline.TimelinePanel.State.Recording || !this._recordingPageReload ||
      this._controller.mainTarget() !== event.data.resourceTreeModel.target())
    return;
  const controller = this._controller;
  await new Promise(r => setTimeout(r, this._millisecondsToRecordAfterLoadEvent));

  // Check if we're still in the same recording session.
  if (controller !== this._controller || this._state !== Timeline.TimelinePanel.State.Recording)
    return;
  this._stopRecording();
}
like image 182
wOxxOm Avatar answered Nov 28 '22 13:11

wOxxOm