Mouseover/hover effect slow on IE8

Question

I have noticed a weird performance thing in IE8 when using mouseover events on a table with many rows (100 in this example). I have tried a lot of different approaches but I can't seem to find any way to get it as fast as I like/need.

If I switch classes on each event the performance goes down in all IE versions, and If I use direct manipulation of the CSS through javascript IE6 and IE7 speeds up alot, but IE8 still performs lousy.

Any ideas ? I would really like to know what it is that makes the mouseover event to perform so sluggish compared to all the other browsers.

If this only happened to IE6 I could understand and let it pass, but when the newest version of the browser is the slowest one, there is only going to be more and more users with a bad experience.

Example using JQuery hover: http://thedungheap.net/research/

EDIT: I have now updated the example so that it is easy to see the difference between having 10 rows and 200. This is in the same document, so this cannot be a problem with the whole DOM size, i guess

Answer 1

The :hover IS very slow on IE8, no matter how you intend to implement it. In fact, the javascript onmouseover, onmouseout events provides way faster methods for creating a hover effect, than CSS does

Fastest example on IE8:

<table>
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'">
   <td>foo bar</td>
</tr>
</table>

Slower example:

<style type="text/css">
   tr.S1    {background-color:#000000}
   tr.S2    {background-color:#FFFFFF}
</style>
<table>
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'">
   <td>foo bar</td>
</tr>
</table>

VERY slow example: JSFiddle

<style type="text/css">
   tr.S     {background-color:#000000}
   tr.S:hover   {background-color:#FFFFFF}
</style>
<table>
<tr class="S">
   <td>foo bar</td>
</tr>
</table>