Dave Johnson

We all know that there are about a dozen ways to do the same thing in JavaScript and the trick is knowing which one is the most efficient under various conditions. Admittedly, the subject of the test today is not necessarily a realistic one but it does nicely illustrate how JavaScript can do things in very different ways to obtain the same result.

Another thing we probably most know is that changing the object.className is quicker (and cleaner in terms of separation of style) than changing the object.style.some-style attribute [1]. If you don�t believe me I will go into more detail about how best to set the stlye of an object in a later post. However, there are still more ways to create the same effect as setting a style or class through other means. This brings us to the task at hand.

Initially, I just wanted to compare two different methods of setting the background color on a table while changing the number of rows in the table. The two methods were:
1) the classic method of setting the className attribute on the root tag of the table (boring)
2) the different method of re-purposing a DIV tag with the background-color style specified which we can move/resize such that the DIV shows up under the desired area we want the background colour to change on

Having done that, I also decided to see how things changed when I did this with a table structure created using TABLE tags versus using SPAN and DIV tags.

First the results for the latest Firefox on WinXP Pro are shown below.

One can see that Firefox is extremely fast at resizing and moving the background DIV to the position of the table (black and red lines) - far faster than setting the className (green and blue). This is true for both the table made from TABLE tags and the one made from DIV tags although setting the className on the table made of DIV tags does slightly out perform the TABLE tags.

Now for the slightly stranger case of Internet Explorer 6 on the same machine.

Here we see that again the fastest method is using the background DIV and a table made from DIV tags (red). However, setting the className on the table of DIV tags is also very fast - in fact it is faster than the same thing in Firefox. But the truly strange thing here is that when you use the background DIV and create the table using TABLE tags (black) it goes slower than molasses during a Canadian winter! After carefully commenting out each line of code I discovered the culprit - calculating the offsetHeight and offsetWidth of a TABLE.

I also checked the latest versions of Netscape and Opera. Netscape was more or less the exact same result as Firefox (go figure) while Opera was the exact opposite and seems to be quickest at using the className rather than moving and resizing the background DIV.

If you just skipped to the end to see the result then the final word is that setting backgrounds on tables is slow; use DIV and SPAN tags instead. Furthermore, placing a re-usable DIV in the background is fastest on both browsers. Finally, stay away from accessing the offsetHeight and offsetWidth of TABLE tags in IE 6!

[1] Benchmark test: style vs className

Del.icio.us

This entry was posted on Friday, July 29th, 2005 at 10:54 am and is filed under Web2.0, AJAX, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.