Javascript Timeline

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

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 Javascript and the DOM. It is useful to understand what happens while the page loads.

Show warnings only

Filter by

Type

Params

Timestamp

{{node.data.callDetails.arguments[0]}} : {{node.data.callDetails.arguments[1]}} : {{node.data.callDetails.arguments[2]}} : {{node.data.callDetails.arguments[3]}}

✖

Called on DOM element

Called on 0 jQuery element

Useless function call, as the jQuery object is empty.

Called on 1 jQuery element

Called on {{node.data.callDetails.context.length}} jQuery elements

The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method is preferable if available (from v1.7).

First one is: {{node.data.callDetails.context.firstElementPath}}

The query returned 0 results. Could it be unused or dead code?

Backtrace

{{trace.fileName || 'HTML'}}:{{trace.line}}

can't find any backtrace :/

{{node.data.timestamp | number: 0}} ms

Back to dashboard