Browser reflows and performance issues

What is a browser reflow? Well actually when you change some property in CSS like change of a color, width, height, font-size, etc. normally the browser redraws the layout just to fit the new requirements after the reflow.

The problem is not in the first render of the page. Than the CSS is just parsed and everything is positioned as the browser reads the CSS. The problem is when you change some CSS property using JavaScript, and in our case using jQuery.

In fact nowadays is very popular to make every kind of animation using JavaScript and most of the “big” libraries, such as jQuery, give you a built in set of functions just to make this task easier for you.

They are designed to be performance tolerant, but what happens if you try to do some CSS change with a simple JavaScript lines of code like these:

document.getElementById('elem').style.width = "100px";
document.getElementById('elem').style.height = "50px";
document.getElementById('elem').style.fontSize = "12px";

Here you force the browser to reflow tree times, which in almost every animation process is multiplied by thousands of times, which is really, really bad. And sad.

When you cannot overcome the CSS reflow?

Yes there is a workaround that improves performance a lot. This is to change not individual properties of CSS, but to switch class names of the elements.

In pseudo code of the task above you can define one class in CSS:

.newsize {
   width : 100px;
   height : 50px;
   font-size : 12px;
}

Thus you can just set the class name of that element:

document.getElementById('elem').className = 'newsize'

In that case there is only one reflow of the browser, which is strongly recommended.

jQuery.css()

Until now I was speaking about general JavaScript and CSS. In the case of jQuery there is a very useful method called css which makes these changes for you.

Yet again if you have defined a class you may use $.addClass() instead of $.css, but however it is not always possible to make so.

Where is not possible to overcome browser reflows?

Well imagine you’ve a square DIV that should go from the left top corner of the page to the bottom right corner. If that should be animated you cannot predefine thousands of class names and than set all these. In that case you should use the $.css function to setup different left and top positions.

There are two ways you can setup a CSS property with jQuery.css().

The first one gives you the possibility to call individual property and its new value just like two normal, string parameters in JavaScript:

$('#elem').css('width', '100px');

Note that here both parameters are strings, and if you’d like to change the background image you can call it just the way you used to in CSS:

$('#elem').css('background-image', "url...");

The second way is to change multiple CSS properties. Than you should call $.css with an object parameter:

$('#elem').css({
   width : '100px',
   height : '50px'
});

Note that here you cannot use background-image as a object key, simply because in JavaScript you cannot name a variable with – inside its name.

So you can simply write something like:

$('#elem').css({ backgroundImage : 'url(...' });

where backgroundImage is the native way to call properties in CSS with dash in its name.

Note also that even you change only one property you can call it with object parameter instead of the first method. The other way is not possible you cannot call:

$('#elem').css(background-image, "url(...");

this will result with an error because yet again JavaScript do not support such names format for the variables.

As you can see $.css() gives you full power and control over the CSS properties change. However you should always thing about performance when it comes to browser reflows. Try to use animation libraries, which are specially designed to do that job, and don’t forget that the new versions of EcmaScript and HTML5 will be better for animations than the current ones.