Эффект наведения мыши/парения замедляется на IE8

Вы пытались увидеть, что произойдет, если у вас будет только один на строку? Любопытно, может ли количество элементов в DOM [или в каждой строке] влиять на производительность. В противном случае это может быть проблемой, связанной с тем, как ie8 просматривает теги в механизме выбора. Не совсем ответ, но кое-что попробовать.

Нет IE8, иначе я бы попробовал сам.

Попробуйте использовать восходящую цепочку событий. Добавьте событие наведения только в таблицу, а затем посмотрите на целевой элемент.

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

Между прочим, для всех браузеров, которые вы можете использовать: hover selector, используя только CSS. И только для IE6 вы можете добавить свое самое быстрое решение.

Мне кажется, что это достаточно быстро, даже не глядя на показатели.

Вы можете попробовать mouseover / mouseout вместо переключения. Вы также можете попробовать делегирование событий, которое часто помогает с таким количеством элементов в домене.

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

Я столкнулся с этой проблемой и применил следующее обходное решение

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","");
});

. Надеюсь, это может быть полезно для вас.

: hover работает очень медленно в IE8, независимо от того, как вы собираетесь его реализовать. Фактически, события onmouseover, onmouseout в javascript предоставляют более быстрые методы для создания эффекта наведения, чем CSS

Самый быстрый пример в IE8:

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

Более медленный пример:

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

ОЧЕНЬ медленный пример: 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>