IE8 上的鼠标悬停/悬停效果缓慢答案

【问题标题】：Mouseover/hover effect slow on IE8IE8 上的鼠标悬停/悬停效果缓慢
【发布时间】：2010-12-04 08:14:10
【问题描述】：

我注意到在 IE8 中使用鼠标悬停事件时有一个奇怪的性能问题，该表有很多行（本例中为 100 行）。我尝试了很多不同的方法，但我似乎找不到任何方法来尽可能快地获得它。

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

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

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

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

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

【问题讨论】：

很想听到这个问题的答案，因为我遇到了完全相同的问题。问题是我不能使用 css :hover 解决方案，因为悬停事件必须更改与鼠标悬停的元素不同的元素的样式。

标签： javascript jquery performance internet-explorer-8 mouseover

【解决方案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>

【讨论】：

虽然我确实有这个问题，但是对于这个特定的例子，我的 IE8 运行得又快又好。
尝试将 100 行添加到您的样本中。然后打开您的任务列表 [Ctrl+Shit+Esc] 并观察 IExplore 如何在您在行上来回移动指针时达到最大 CPU。

【解决方案2】：

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

【讨论】：

实际上不能，因为 :hover 仅适用于 a 元素。
仅在 IE6 中。所有其他浏览器都支持 :hover 任何元素。
是的，CSS 总是比 JavaScript 快。你真的应该只在你有的时候才使用JavaScript。

【解决方案3】：

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

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

【讨论】：

我之前试过这个，效果一样，我做错了什么？它不起作用，例如：thedungheap.net/research/eventbubbling.aspx

【解决方案4】：

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

没有IE8，否则我自己试试。

【讨论】：

我只尝试了一列，这当然更快，但是如果我增加行数以使表内的元素数量相等，它又会变慢，所以它似乎被锁定了精确到表格标签内有多少元素。

【解决方案5】：

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

您可以尝试 mouseover/mouseout 而不是切换。您还可以尝试事件委托，这通常有助于处理 dom 中的这么多元素。

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

【讨论】：

正如贾斯汀建议的那样，我尝试了事件冒泡（委托）但无法使其工作，请查看链接：thedungheap.net/research/eventbubbling.aspx
我也尝试了 mouseover/mouseout，但性能没有任何差异

【解决方案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】：

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

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

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

这对我来说是一个真正的问题，因为我遇到这个问题的项目是左右按钮/箭头上的悬停效果，我用它来为左右选项卡设置动画，选项卡将位于按钮下方，一个选项卡幻灯片，如果我可以说，当光标进入按钮区域时，普通图像会消失，下面的图像会在几毫秒内可见，然后，悬停图像最终会显示出来，很难看。

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

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

【讨论】：