Engineering Insights & Web Platforms
The files have over 17 and 14 megs (the one with hrefs being larger due to more text). Here’s the beginning of each file:
<a class="”td”">-</a> <a class="”td”">-</a> … 330.478 more
<a class="td">-</a> <a class="td">-</a> … 330.478 more
The “td” class used is necessary since rendering the anchors with href results in underlining the text, thus consuming more CPU power for drawing the page, than the anchors with onclick which do not get underlined.
The environment on which the test was performed is a Windows XP SP2 machine with Multiple IEs for testing on both IE7 and IE6 as well as Firefox 2, Firefox 3, Chrome, Opera, and Safari. The rendering time on one browser is not important (which is why I don’t mention hardware indicators), but the actual time comparison between all the browsers. Let’s see the results first:
If you however are a hardcore programmer who needs those extra seconds, Internet Explorer is the only one that renders href-s much quicker than onclick-s. All the other browsers render onclick-s faster than href-s. If your website will be accessed by a wide audience of users, given that IE has still the biggest share of the browser market, you may want to render your anchors using href-s.
IE6 renders the page with href-s incredibly faster, but at the same time, it took more than 5.5 minutes to render the page with onclick event (I eventually killed the process after 5.5 minutes). This may be due to Multiple IEs, so the second result for IE6 is questionable.
And the newest kid in the block, Chrome behaves better than Firefox 3 but much slower than Firefox 2.
While this test may give a slight idea of how fast these browsers perform with this specific test case, it is not relevant for regular HTML pages filled with various elements (div-s, span-s, br-s, p-s, etc). For those pages, as probably everyone has noticed, FF3 renders the page much faster than IE7, IE6, or FF2.