Frontend Performance

Ever had a (Drupal) website that just did not respond fast enough and you could not figure out what was causing it? I bet you did not look at the frontend code. The part which takes place in the browser of the site visitor. As a web developer we all tend to have big and (resource) heavy machines with powerful CPU's. Most of the time that's not the case for the visitor of your website. Even worse, the visitor might be using IE7 or older!

Why is that a problem? Well, the performance of browsers varies... a lot. Let's take a quick look at some test results. At the jsperf.com website you'll find all kinds of performance tests. We'll take a very simple test as an example: comparing id, class, tag, attribute and pseudo selectors in jQuery 1.7. Here's the result in a graph.

jQuery ID

$("#foo");

jQuery Tag

$("blockquote");

jQuery Class

$(".bar");

jQuery attribute

$("[name='baz']");

jQuery Pseudo-selector

$(":hidden");

As you can see, selecting on ID is by far the fastest method, in all browsers. But when you compare different browsers, then you can see the problems that might arise. IE8 does around 20000 operations per second for the ID selector. Chrome on the other hand will do 600000 operations per second. That's 30 times more than IE8!

So how can we, as developers, make sure that we optimize our (Drupal) websites on the frontend for a smooth user experience? Well, there are quite some sites around with very good tips and tricks. I've taken the liberty to collect some of them here.

Stay away from the DOM

Manipulating the DOM takes time, a lot of time. If you have to manipulate the DOM, try to do it in big chunks. Instead of iterating over a collection and adding an

element on each iteration, create a string where you build up the HTML and insert that string at the very end.
Caching

What, caching? In javascript? Well, sort of. Instead of reselecting elements from the DOM with a jQuery selector, like $('#foo') multiple times, it is better to create a variable where you store the element. For example:

var foo = $('#foo');
foo.fadeOut();
foo.fadeIn();

Selector speed

Try to use the selector which is fastest and limit your selector if possible. For example:
1. $("#id p");
$("#id").find("p");

The second statement is much faster than the first. Instead of traversing the DOM to search for all p elements that happen to have a parent with the #id ID, you should first select the #id element and then look for any p elements in that element.

Drupal specific

We all know we should use the behaviors method that Drupal provides us.

This is however a time consuming process. So try to limit the number of Drupal.behaviors in your scripts. Combine multiple scripts into one, whenever possible, to limit the amount of overhead.

Resources

I've borrowed some (a lot actually) from this great article by Scott Kosman. A must read if you want to find out more about jQuery performance. Some other resources include:

Original Article:

Frontend Performance