优化jQuery悬停代码以更好地执行（更平滑的动画）

最近我花了一些时间阅读关于jQuery优化技巧，这无疑帮助提高了我的脚本的性能。但是，我在我的网站上有这个特色新闻部分，它在鼠标悬停的位置上放置了更多信息，而且这部分在除Safari之外的任何浏览器中表现都不是很好（当然也可能是Chrome）。）优化jQuery悬停代码以更好地执行（更平滑的动画）

我相信这样做的原因是它在动画之前对每个mouseover/mouseout事件进行了相当多的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}); 
});

由于我工作的网站尚未公布我已经uploaded a screenshot of the news section给你的是什么样子的想法。

谢谢！

来源

2009-10-07 heintore

另一种解决方案是将memoize全部计算。

不要直接调用悬停，使用“each”，计算，然后应用“悬停”。
因此（我试图改变尽可能少的代码）：

$('#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); 
    }); 
}

该解决方案将使我以前的答案多少有些毫无意义（他们来说意义不大，但仍然适用）。尽管如此，请记住简介。

来源

2009-10-07 09:42:30 RichN

这是一个相当优雅的解决方案。我一定会试着看看它在性能方面是否会产生更好的结果。再次感谢！ – heintore 2009-10-07 09:56:10

你做了一些工作多次，这会伤害你。多少还很难说，但试试这个...

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

它也像你的DOM结构必须是所有这种面板使用不同位置的不同，因为你的代码似乎有做公平的工作来找到合适的dom使用位。如果可能的话，我会建议在所有不同的位置使DOM结构相同，然后在代码中使用该结构。

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

来源

2009-10-07 08:57:28

优秀的建议 - 谢谢！相关后续问题：从jQuery开始，我总是想知道在动画中提供更短或更长的持续时间会对速度和性能产生什么影响。有没有对此的答案？将fadeOut（“快”）比fadeOut（“慢”）更快或更慢？ – heintore 2009-10-07 09:15:00

我不这么认为。在这两种情况下，我认为它会更新元素的不透明度并以浏览器允许的速度刷新页面。更快的浏览器只会挤入更多的步骤，导致更平滑的动画。 – 2009-10-07 12:27:11

对于起动器，它是可以做到Common subexpression elimination，因此，例如，而不是调用

$(this)

多次，存储该对象在一个变量和使用该变量代替。

var current = $(this);

另一方面，一次性使用变量可以内联。有些人可能称之为过早优化，但由于已经说过代码速度很慢，所以我认为现在还不成熟。

bottomOrSide变量似乎并没有在那里使用。

至于选择器，有可能用这个替换整个长东西？

$('.featuredBox')

来源

2009-10-07 09:01:38 RichN

在我微小的小脑袋里，我想我的选择器会因为限制范围而加快速度，但这可能不适用于这种特殊情况？ – heintore 2009-10-07 09:09:47

我期望一个简单的'.featuredBox'选择器在这种情况下执行得更快 - 但是，如果您想知道的话，一如既往_benchmark_！ – 2009-10-07 09:18:11

顺便说一句，该特定的选择器不会减慢悬停动画的速度;该选择器似乎只被执行一次。 – 2009-10-07 09:19:57

优化jQuery悬停代码以更好地执行（更平滑的动画）

回答

相关问题