Benchmark - style vs. className

This is a benchmark page to find out which method of changing the styles of elements is faster: changing the style.someThing property or changing the className and leaving it to CSS to perform the style switches.

General conclusion: changing the className is faster, except in Opera.

Do the test

Test results

I did each test 5 times, and then used the index values for judging the relative speed of the various methods. The "Fastest" methods have index 100 by definition. I added a rough index number for the slower method. Of course these index numbers are based on the browsers running on my computers, so you'll likely get slightly different values when you run the tests yourself.

For comparison's sake, here are the average times of the fastest methods on my computers:

1. Safari: 16 ms
2. Opera: 50 ms
3. Konqueror: 70 ms
4. Mozilla: 100 ms
5. IE6: 360 ms
6. IE7: 320 ms

Again, you'll find quite different times when you perform the tests yourself.

Discussion

The obvious conclusion must be that changing the className of an element is faster than changing its style. The only browser for which this is not true is Opera. (This used to be Safari).

Changing the rendered page

An interesting secondary conclusion I drew from this test is that all browsers, except for Opera, change the rendered page only after the script has finished completely. I noticed this when I implemented the phase messages ("Create table", "Wait", "Pick a test", "Wait"). The two Wait messages are meant for users of slower browsers, who might think their browser has stopped responding.

At the start of the creation of the test table and the running of the test, I switched to the appropriate Wait message, and at the end of the process I switched to the appropriate active phase message. Unfortunately it turned out that, except for Opera, the browsers didn't show my Wait message at all. Instead, they waited for the script to end before changing anything on the page, which was of course after the message had been changed to the next active phase.

I solved this problem by applying a 10 ms timeout between the changing of the message and the running of the test or creation of the table. Therefore the messages now work correctly.

Methodology

This page contains a test table with TDs. The two test scripts change the style or className of all these TDs to apply the following styles:

.teststyle {
	background-color: #00cc00;
	font-size: 120%;
}

A timer is started, the script is run, the timer is stopped, and the time the browser needs is inserted into the results table above.

The largest problem in creating this test was cleaning up the test table after a test had been performed. After all the test table should not contain any style or className, since that might influence a new test run.

In the end the simplest solution was to create a hidden test table, clone it and append it to the document whenever a new test is being set up. The clone is changed and this change is timed. When you create a new test table the old clone is discarded and a new one inserted.
Unfortunately this feature of the test makes Explorer Mac slow to a crawl.

The test table