Javascript Animate Performance

Javascript Animate Performance

本文关键字：Performance Animate Javascript      更新时间：2023-09-26

我的js在这里遇到了一些问题。

它运行正常，但在某些情况下性能太慢。

我轻轻地滚动到底部，但是当我尝试再次向上滚动时，它滚动得非常慢。

我能做些什么来提高性能？

谢谢！

$(function(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var sectionsNumbers = $("#content section").length-1;
var sectionCount = 0;
// Scroll sets
var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;
$("#content").css("width", windowScrollX+windowWidth);
$("#content").css("height", windowScrollY+windowHeight);
$(".illusion1").css("width", windowScrollX+windowWidth);
$(".illusion1").css("height", windowScrollY+windowHeight);
// Set mask w and h
$("#mask").css("width", windowWidth);
$("#mask").css("height", windowHeight);
$(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);
$("#content section").each(function() {
    // Defines its width and height
    $(this).css("width", windowWidth);
    $(this).css("height", windowHeight);
    // Defines its position
    $(this).css("left", sectionCount*windowWidth);
    $(this).css("top", sectionCount*windowHeight);
    sectionCount++;
});
// When window scrolls
$(window).scroll(function(){ 
    var curScrollTop = $(window).scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing: 'easeOutQuart'});
    $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing: 'easeOutQuart'});
    //{duration: 1500, easing: 'easeOutQuart'}
    });
});

你没有在动画中缓存选择器（反复使用 $（this） 或 $（'#mask'） 也是浪费），所以每次用户滚动时，它都会搜索整个 dom/以查找 #content，#illusion1。此外，在滚动上制作动画有些多余，因为滚动本身就是一种"动画"。固定定位将是理想的，但您只需在每个滚动上设置 CSS 样式即可实现相同的效果。只是不要在每个滚动事件上使用动画。此外，您没有为左侧和顶部提供"px"，这样做可以防止需要通过前缀"-"+"将"强制转换"到字符串中。尝试重写 $（window）.scroll 函数，如下所示：

var $window = $(window),
    $content = $("#content"),
    $illusion = $(".illusion1");
$window.scroll(function(){ 
    var curScrollTop = $window.scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $content.css({ left: (-curScrollTop*angleVar)+'px', top: (-curScrollTop)+'px' });
    $illusion.css({ left: (-curScrollTop*angleVar*0.5)+'px', top: (-curScrollTop*0.5)+'px' });
});

如果您专注于动画效果，请考虑使用去抖动/油门方法。与其对每个滚动事件进行动画处理，不如使用："timeout = setTimeout（function（）{ ... }， 25）"，它将在允许超时过期时执行动画，并在滚动时只需清除超时（timeout）并再次设置超时。动画不会是实时的，因为除非用户停止滚动 25 毫秒，否则永远不会执行动画。

不确定这是否有帮助，但是当我必须在滚动时相对于浏览器窗口移动元素时，我使用某种形式的固定定位。 我发现这在 Chrome 和其他浏览器中提供了更好的性能，而不是尝试设置或动画绝对或相对定位元素的偏移量。 也许如果你能鞭打一个jsfiddle来说明你正在努力达到的效果，我可以给出一些进一步的建议。

编辑：如果你能提供一些HTML来代替jsfiddle，那也会有所帮助。

我会

说将整个捆绑包更改为TweenLite，它比jQuery动画运行更流畅。

http://www.greensock.com/v12/

您可以在下面比较差异。

http://www.greensock.com/js/speed.html

相关文章：