优化 jQuery 悬停代码以实现更好的性能（更流畅的动画）

Question

最近，我花了一些时间阅读 jQuery 优化技巧，这无疑有助于提高我的脚本的性能。

表现不佳（可能还有 Chrome。）

然而，我的网站上有这个特色新闻部分，鼠标悬停时会将更多信息滑入到位，并且该部分在除 Safari 之外的任何浏览器中都 我相信，这是因为它在动画之前对每个鼠标悬停/鼠标悬停事件进行了相当多的 DOM 遍历和计算。

我的问题很简单：有没有办法优化下面的代码，让动画运行得更流畅？

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').hover(function(){ 
var boxHeight = parseInt($(this).css('height'))-8;
var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
var captionPos = 76;
var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
var animateTo = boxHeight-captionHeight;

$(".videoCaption", this).stop().animate({top:animateTo + 'px'},{queue:false,duration:160});
}, function() {
$(".videoCaption", this).stop().animate({top:captionPos},{queue:false,duration:100});
});

由于我正在开发的网站尚未发布，所以我已 上传新闻部分的屏幕截图，让您了解它的样子。

谢谢！

Answer 1

另一种解决方案是记忆所有计算。

不要直接调用hover，使用“each”，计算，然后应用“hover”。
因此（我尝试尽可能少地更改代码）：

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').each(function(){ 
  var boxHeight = parseInt($(this).css('height'))-8;
  var bottomOrSide = $(this).parents("div[id^='featured']").attr("id")
  var captionPos = 76;
  var captionHeight = parseInt($(this).find(".videoCaption").css('height'));
  var animateTo = boxHeight-captionHeight;

  var params = {top:animateTo + 'px'};
  var options = {queue:false,duration:160};
  var target = $(".videoCaption", this);

  $(this).hover(function () {
    target.stop().animate(params, options);
  });
}

这个解决方案将使我之前的答案有些无意义（它们并不重要，尽管仍然适用）。不过，请记住进行配置文件。

Answer 2

对于初学者来说，可以执行公共子表达式消除，例如，而不是

$(this)

多次 调用，将该对象存储在变量中并使用该变量。

var current = $(this);

另一方面，可以内联一次性使用的变量。
有些人可能称其为过早优化，但由于已经指出代码很慢，所以我认为这并不为时过早。

那里似乎没有使用 BottomOrSide 变量。

至于选择器，可以用这个替换整个长的东西吗？

$('.featuredBox')

Answer 3

有些工作你要重复做几次，这会对你造成伤害。很难说多少，但是试试这个...

var el = $(this);
var vid = $(".videoCaption", this);
// use el.blar() instead of $(this) and vid.blar() instead of $(".videoCaption", this).blar()

看起来你的 dom 结构在使用这个面板的所有不同位置都必须不同，因为你的代码似乎必须做相当多的工作才能找到使用适当的 dom 位。如果可能的话，我建议在所有不同位置使 DOM 结构相同，然后在代码中使用该结构。

如果这是不可能的，请尝试为每个位置编写此函数的唯一版本 - 并不理想，但如果它解决了您的性能问题，则可能是值得的。