17

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

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

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

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

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

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

4

7 回答 7

5

: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>
于 2010-04-19T19:39:25.750 回答
4

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

于 2009-10-06T16:39:01.110 回答
1

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

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});
于 2009-10-06T16:49:01.090 回答
0

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

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

于 2009-10-06T16:41:04.600 回答
0

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

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

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });
于 2009-10-06T16:46:36.947 回答
0

我遇到了这个问题并实施了以下解决方法

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

我希望这对你有用。

于 2009-12-09T10:23:12.577 回答
0

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

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

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

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

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

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

于 2013-04-17T20:21:49.170 回答