javascript - Jquery - Firefox 具有较慢的 .love() 悬停速度，Chrome 和 IE 很快

Question

好的，我正在开发一个新网站。它是一个社交网络类型的网站，并且具有很多 jquery 交互性。

当我尝试使用 JQuery.live() 实现鼠标悬停效果时出现问题。它在 Chrome 和 Safari 中运行非常快，在 IE 中非常快，在 Firefox 中运行缓慢。非常奇怪，因为几乎总是 FF 比 IE(8/9) 快得多。

有问题的页面: http://www.modelfy.com/user/22/info

如果您将鼠标悬停在 chrome 中的“最新图片”上，然后在 Firefox 中，您会发现速度上存在巨大差异。

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    $(this).addClass('hoverclass');
  } else {
    $(this).removeClass('hoverclass');
  }
});

如有任何帮助，我们将不胜感激。另外，.live 是优化的最佳选择吗？

谢谢!

Answer 1

我不完全确定为什么 firefox 速度较慢，但​​您可以尝试添加上下文元素。您可以这样做，而不是将所有事件绑定(bind)到根元素:

$('div.clickme', $('#recent_photos')[0]).live('mouseover mouseout', function() {
  ...
});

这样做可以最大限度地减少遍历量和绑定(bind)到同一节点的事件量。

要找出哪个函数调用速度慢，您可以使用 firebug 分析您的代码。要获得有用的结果，您必须使用未压缩版本的 jQuery。