Yellow Lab Tools

Tested url: {{phantomasResults.url}}

New test

Summary

Spaghetti

Metrics

Error: {{phantomasResults.error}}

Phantomas timed out

Phantomas config error

Phantomas failed to load page

Phantomas internal error

Javascript execution tree error

JSON undefined error

Summary

DOM complexity

DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}
DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}
Number of iframes: {{phantomasResults.metrics.iframesCount}}

DOM read and write

DOM inserts: {{phantomasResults.metrics.DOMinserts}}
DOM queries: {{phantomasResults.metrics.DOMqueries}}
Time they took: {{totalJSTime}} ms

Duplicated DOM queries

Avoidable queries: {{duplicatedQueriesCountAll}}

Events bound

Events bound: {{phantomasResults.metrics.eventsBound}}

Bad Javascript

Javascript errors: {{phantomasResults.metrics.jsErrors}}
eval calls: {{phantomasResults.metrics.evalCalls}}
document.write calls: {{phantomasResults.metrics.documentWriteCalls}}
Console messages: {{phantomasResults.metrics.consoleMessages}}

Scripts loaded

Scripts count: {{phantomasResults.metrics.jsCount}}

jQuery version

jQuery version: {{phantomasResults.metrics.jQueryVersion}}
{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded: {{version}} &

Javascript Spaghetti 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 content loaded event

Page completion

Page is complete

Executing Javascript and DOM queries here is a bad practice and slows down the DOM construction.

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 fully loaded, it's time for low priority things : trackers, social plugins, easter egg...

Javascript Spaghetti Profiler

The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
The tool is slower than a real browser, so durations are a little exagerated.

Filter by

Requests slower than ms

Type

Params

Duration

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 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 preferred if available (from v1.7).

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

Backtrace

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

can't find any backtrace :/

Sub processes

Type

Params

Duration

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

{{node.data.time}} ms

Metrics from Phantomas report

Phantomas is a web performance metrics collector. You can find here the (almost) entire list of metrics from Phantomas.

{{metricName}}: {{phantomasResults.metrics[metricName]}} {{metric.unit}}

{{metric.desc}} (unreliable)

Show offenders

Hide offenders

{{offender}}

Error: {{phantomasResults.error}}

Summary

Javascript Spaghetti Timeline

Javascript Spaghetti Profiler

Called on DOM element

Called on 1 jQuery element

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

Backtrace

Sub processes

Metrics from Phantomas report

{{moduleName}}