Эффект Mouseover/hover медленный на IE8

Я заметил странную производительность в IE8 при использовании событий mouseover в таблице со многими строками (100 в этом примере). Я пробовал много разных подходов, но я не могу найти способ получить его так быстро, как мне нравится/нужно.

Если я переключаю классы на каждое событие, производительность снижается во всех версиях IE, и если я использую прямую манипуляцию CSS с помощью javascript IE6 и IE7, то ускоряется много, но IE8 все еще работает паршиво.

Любые идеи? Мне бы очень хотелось узнать, что это такое, что делает событие mouseover таким медленным по сравнению со всеми другими браузерами.

Если это произошло только с IE6, я мог бы понять и позволить ему пройти, но когда самая новая версия браузера самая медленная, будет только все больше пользователей с плохим опытом.

Пример использования JQuery hover: http://thedungheap.net/research/

EDIT: Теперь я обновил этот пример, так что легко увидеть разницу между 10 строками и 200. Это в том же документе, поэтому это не может быть проблемой для всего Размер DOM, я думаю,

Ответ 1

: hover очень медленный на IE8, независимо от того, как вы собираетесь его реализовать. Фактически, javascript onmouseover, события onmouseout обеспечивают более быстрые методы для создания эффекта наведения, чем 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>

Ответ 2

Btw для всех браузеров, которые вы можете использовать: селектор hover с использованием только css. И только для IE6 вы можете добавить свой самый быстрый soluton.

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

Кажется достаточно быстрым для меня, не глядя на метрики.

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

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

Ответ 6

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

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

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

Ответ 7

Извините, что поставил ответ на этот старый вопрос, но я думаю, что он уместен, и эта страница хорошо оценена Google, поэтому...

Ничего себе, я просто потратил много времени на эту проблему, я пытался использовать Javascript, но он все еще был медленным.

Это решение, если вы используете фоновые изображения:

Это была настоящая проблема для меня, потому что проект, с которым я столкнулся, был эффект наведения на кнопки и стрелки влево и вправо, которые я использую для анимации вкладок влево и вправо, вкладки будут находиться под кнопками, вкладкой слайд-шоу, если я могу сказать, и когда курсор войдёт в область кнопки, нормальное изображение исчезнет, изображение ниже будет видно на несколько миллисекундов, а затем изображение наведения будет отображаться, уродливо.

Реальное решение заключалось в использовании спрайтов изображений, таким образом, нет абсолютно никакого запаздывания даже в чистом css. Идея состоит в том, чтобы иметь единое изображение со всеми состояниями изображений разных цветов (нормальный/зависающий/выбранный/неактивный/и т.д.), Вы устанавливаете изображение как фоновое изображение, и вы просто корректируете значение фоновой позиции для эффекта наведения и другие.

Если вы хотите лучше узнать о css спрайтах: http://css-tricks.com/css-sprites/