Filter timeline and profiler by script:

JavaScript Timeline

This graph gives a quick view of when the JavaScript interactions with the DOM occur during the loading of the page.

Timestamp: {{$index * timelineIntervalDuration | number: 0}} ms
0 ms
{{endTime | number: 0}} ms
DOM creation
DOM interactive
DOM content loaded event
Page completion
Page is complete
Executing JavaScript and DOM queries here is a bad practice and slows down the DOM construction.
Some frameworks do things here, but it's not reliable and should be avoided.
Also known as "document ready". This is where you should execute top-priority scripts, like binding action buttons or launch a video player.
Here you can execute mid-priority tasks. Loading a script with createElement('script') is one way to do so.
The page is considered loaded, it's time for low priority things : trackers, social plugins, easter egg...

JavaScript Profiler

The table below shows the interactions between the JavaScript and the DOM. It is useful to understand what happens while the page loads.

{{queryWithoutResultsFilterOn}}
Type
Params
Timestamp
Back to dashboard