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

Btw for all browsers you can use :hover selector using css only. And only for IE6 you can add your fastest soluton.

Answer 2

Have you tried to see what happens if you only have one per row? Curious if it is the number of elements in the DOM [or in each row] could affect performance. Otherwise, it could be an issue with the way ie8 traverses tags in the selector engine. Not really an answer, but something to try.

No IE8 or I'd try it myself.

Answer 3

Seems fast enough to me, without actually looking at metrics.

You could try mouseover/mouseout instead of toggling. You could also try event delegation, which often helps with this many elements in the dom.

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });

Answer 4

Try using event bubbling. Add the hover event to the table only, and then look at the target element.

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});

Answer 5

I have faced this issue and implemented the following workaround

var viewTable = jQuery("table.MyTable");
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body");
var highlightColor = temDiv.css("background-color");
viewTable.mouseover(function(eventObj){
 jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor);
}).mouseout(function(eventObj){
 jQuery(eventObj.target).parents("tr:first").css("background-color","");
});

I hope this could be useful for you.

Answer 6

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:

<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>