鼠标悬停/悬停效果在 IE8 上缓慢

Question

我注意到在 IE8 中，当在包含许多行（本例中为 100 行）的表上使用鼠标悬停事件时，性能会出现奇怪的情况。我尝试了很多不同的方法，但我似乎找不到任何方法来按照我喜欢/需要的速度获得它。

如果我在每个事件上切换类，则所有 IE 版本的性能都会下降，如果我通过 javascript 直接操作 CSS，IE6 和 IE7 会加速很多，但 IE8 的性能仍然很差。

有什么想法吗？我真的很想知道是什么使得鼠标悬停事件与所有其他浏览器相比执行得如此缓慢。

如果这种情况只发生在IE6上我可以理解并让它过去，但是当最新版本的浏览器是最慢的浏览器时，只会有越来越多的用户体验不好。

使用 JQuery 悬停的示例： http://thedungheap.net/research/

编辑：我现在更新了示例，以便很容易看出 10 行和 200 行之间的区别。这是在同一个文档中，所以我猜这不会是整个 DOM 大小的问题

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

Answer 2

顺便说一句，对于所有浏览器，您都可以使用 :hover 选择器，仅使用 css。并且仅对于 IE6，您可以添加最快的解决方案。

Answer 3

尝试使用事件冒泡。仅将悬停事件添加到表格中，然后查看目标元素。

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

Answer 4

您是否尝试过看看如果每行只有一个会发生什么？好奇 DOM [或每行] 中的元素数量是否会影响性能。否则，可能是 ie8 在选择器引擎中遍历标签的方式出现问题。这并不是真正的答案，而是值得尝试的事情。

没有IE8，否则我会自己尝试一下。

Answer 5

对我来说似乎足够快，无需实际查看指标。

您可以尝试鼠标悬停/鼠标移出而不是切换。您还可以尝试事件委托，这通常有助于处理 dom 中的众多元素。

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

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

希望这对您有用。

Answer 7

很抱歉发布这么旧的答案，但我认为它是相关的，并且该页面在谷歌上排名很高，所以...

哇，我刚刚在这个问题上花了很多时间，我试图使用Javascript，但仍然很慢。

如果您使用背景图像，这是一个解决方案：

这对我来说是一个真正的问题，因为我遇到此问题的项目是我用来对选项卡进行动画处理的左右按钮/箭头上的悬停效果向左和向右，选项卡将位于按钮下方，如果我可以说，选项卡幻灯片放映，当光标进入按钮区域时，正常图像将消失，下面的图像将显示几毫秒，然后，悬停图像将最终显示出来，丑陋。

真正的解决方案是使用图像精灵，这样即使在纯 CSS 中也绝对没有延迟。这个想法是拥有一个包含所有不同图像状态的单个图像（正常/悬停/选定/非活动/等），您将图像设置为背景图像，然后只需调整悬停效果的背景位置值即可其他的。

如果您想更好地了解 css sprites： http://css-tricks.com/css-sprites/