Javascript and Performance

Question

我在这里遇到了一个奇怪的问题。我有一个Javascript代码，可以对角滚动我的页面。它获取 scrollTop（） 值并将其除以对角滚动。但是当我尝试使用两个"图层"滚动它时，前景滚动比背景图层多，当我完成滚动到底部并尝试再次滚动到顶部时，我会遇到缓慢的动画。

我已经尝试了一些我在这里看到的东西，比如缓存变量，在例如 $（窗口）中声明为 $window 没有运气。我不知道这个问题是由数学还是动画发生的。

这是我的jsfiddle：http://jsfiddle.net/sPB3a/

您可以在此处全屏体验：http://jsfiddle.net/sPB3a/show/

感谢您的任何提示！

Answer 1

我认为问题的根本原因是背景图像的大小。我从您的页面中删除了所有背景图像，并且滚动非常流畅。

它们真的很重。您应该尝试使用非常低质量的jpg图像（小于20k）。如果这有效，则必须处理图像以找到好的折衷方案。

注意：png格式是一种松散的图像格式。它适用于小图像和屏幕截图（大区域具有完全相同的颜色）。当有很多非常相似的颜色、模糊和渐变时，这并不好。例如照片。在您的情况下，您应该使用 jpg 格式并调整质量水平。

Answer 2

您正在查询 $(window).scroll 函数中的 dom。我不认为这是一个好的做法。

缓存你的变量，通过javascript访问dom非常慢。

我的代码中有很多东西，请检查它是否对您有帮助。

小提琴

$(function(){

    var $window = $(window);
    var windowHeight = $window.height();
    var windowWidth = $window.width();
    var content = $("#content");
    var section = content.children("section");
    var sectionsNumbers = section.length-1;
    var illusion =  $(".illusion1");
    var mask = $('#mask');
    // Scroll sets
    var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
    var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;
    content.css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});
    illusion .css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});

    // Set mask w and h
    mask.css({"width":windowWidth,"height":windowHeight});
    $(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);

    section.each(function(sectionCount,val) {
        // Defines its width and height
        var $this = $(this);
        $this.css({"width":windowWidth,"height":windowHeight,"left":sectionCount*windowWidth,"top":sectionCount*windowHeight});

    });
    // When window scrolls

    var angleVar = windowScrollX/windowScrollY;
    var curScrollTop;
    $(window).scroll(function(){
        var $this = $(this);
        curScrollTop = $this.scrollTop();
        content.stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 1250, easing: 'easeOutQuart'});
       illusion.stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 1250, easing: 'easeOutQuart'});        
    }); 
});