Yellow Lab Tools

A high number of DOM elements means a lot of work for the browser to render the page.

It also slows down Javascript DOM queries, as there are more elements to search through.

A deep DOM makes difficult the CSS matching with DOM elements.

It also slows down Javascript modifications to the DOM because dimensions calculations bubble up. Same thing for Javascript events.

iFrames are the most complex HTML elements. They are pages just like the main page and the browser needs to create a new page context, wich has a cost.

IDs of HTML elements must be document-wide unique. This can cause problems with getElementById returning the wrong element.

Working with the DOM in Javascript triggers layout calculations and slows down the page.

Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.

DOM queries are like looking in a large catalog of items. Even if the browsers made progress on the performances of a query, many websites make hundreds of them.

Try to reduce the number of queries by refactoring your Javascript code.

Avoid also to have a read query between two write queries. To reduce the number repaints and optimize performances, browsers buffer the DOM writing operations. But each time a DOM reading is asked, the browser needs to empty the buffer. This can be particularly slow inside a loop.

Please note that the tool is not accurate. The time indicated here is generally 3 or 4 times slower than on modern browsers.

Some DOM manipulations can be very slow. For example, searching with a complex selector, making big changes to the DOM, animating an element, inserting an iframe, ...

This is the number of queries that could be avoided by removing all duplicated queries.

Simply save the result of a query in a variable. Ok it is not always simple, especially with third-party scripts, but at least do it with your own code.

Binding too many events has a cost.

It can be avoided by using "event delegation". Instead of binding events on each element one by one, events delegation binds them on the top level document element and uses the bubbling principle.

Just to let you know there are some errors on the page.

Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.

The 'eval' function is slow and a bad coding practice. Try to get rid of it.

They slow down the page construction, especially if they are used to insert scripts in the page. Remove them ASAP.

If you cannot remove them because they come from a third-party script (such as ads), have a look at PostScribe.

Try to keep your console clean when in production. Debugging is good for development only.

Writing in the console has a cost, especially when dumping large object variables.

There is also a problem with Internet Explorer 8, not knowing the console object.

It is a bad practice because they clutter up the global namespace. If two scripts use the same variable name in the global scope, it can cause conflicts and it is generally hard to debug.

Global variables also take a (very) little bit longer to access than local variables.

Current latest version of jQuery is 1.11 or 2.1

Each new version of jQuery optimizes performances. Do not keep an old version of jQuery. Updating can break a few things, but it is generally quite easy to fix them up, so don't hesitate.

Having a huge number of CSS rules hurts performances. If the number of CSS rules is higher than the number of DOM elements, there is clearly a problem.

The problem generally occurs when all the pages of a website load all the CSS, concatenated in a single stylesheet. Solution is to create one main CSS file with global rules and one custom files per page.