提高背景视差滚动的性能

Question

你好，StackOverflow社区，

我想要实现的是一个可以用鼠标移动的标题。你点击头部并拖动鼠标，头部内的元素将以不同的速度移动。

我实现了视差部分，但性能并不是很好。在拖动背景时，它部分地有一点滞后。

我现在的问题是:可以在代码中进行哪些更改以获得性能提升？

这是代码中负责视差的部分。每次鼠标移动时，都会执行一个each循环，我认为这就是性能如此滞后的原因：

var dragging = false;
var clickMouseX;

//Our object for the layers
//each layer has a different scrolling speed
var movingObjects = {
    '#header-l1' : {'speed': 1},
    '#header-l2' : {'speed': 1.4},
    '#header-l3' : {'speed': 1.85},
    '#header-l4' : {'speed': 2.2},
};

$('#header-wrapper').mousedown(function(e){
    dragging = true;

    //Get initial mouse position when clicked
    clickMouseX = e.pageX;

        $(this).mousemove(function(mme){
            //execute only if mousedown
            if(dragging){
                //iterate through all layers which have to be parallaxed
                $.each(movingObjects, function(el, opt){
                    var element = $(el);
                    //get difference of initial mouse position and current mouse position
                    var diff = clickMouseX - mme.pageX;
                    //scroll-position left speed 1
                    if(diff < 0) diff = -1;
                    //scroll position right speed 1
                    if(diff >= 0) diff = 1;
                    //get current position of layer
                    currLeft = parseInt(element.css('left'));
                    //get current layer width
                    elWidth = element.width();

                    //if right border is reached don't scroll further
                    if(currLeft < -(elWidth - 810)){
                        element.css('left', -(elWidth - 810));
                    }           
                    //so do with left border
                    if(currLeft > 0){
                        element.css('left', 0);
                    }
                    //parallax it! Subtract the scroll position speed multiplied by the speed of the desired
                    //layer from the current left property
                    element.css('left', parseInt(element.css('left')) - diff*opt.speed);    
                });
            }
        });


    /* Cursor */
    $(this).css('cursor', 'pointer');
    return false;
});

我还放了一把小提琴：http://jsfiddle.net/yWGDz/

提前谢谢你，托马斯

另外，也许有人甚至会发现为什么第二层和第三层的滚动速度相同，而定义的速度却不同。

Answer 1

我在这方面做了一些工作，并想出了这个：http://jsfiddle.net/amqER/2/

它的运行速度比原来的要快得多(尤其是在火狐中，它的表现要好得多，而chrome的速度仍然很慢)。我还修改了代码中的一些逻辑，使其更有意义。

一份我做过的事情的清单：

缩小pngs

你的png文件中有2个超过2兆，所以我把它们放到一个png压缩器(tinypng)中，这大大减小了文件的大小。这有助于提高加载时间和整体快捷性。

尽可能多地重用值

在原始代码中，您在代码中向css left属性写入了几次内容，然后又从中读取了几次。这样做会让它变得慢很多。取而代之的是，我保留了一个left属性，并且只有在我绝对需要的时候才会去接触$.css。同样，对于读取每个元素的宽度，每次更新都是如此。

另外，正如我所说的，我修改了你的逻辑，以(我认为)更有意义，考虑到你试图实现的目标。它每次更新都会计算一个新的差异，并尝试根据该差异进行移动。此外，它不会试图在其中一个图像掉下来时继续移动(如果你一直向右移动，你的图像就会掉下来，而且看起来真的很奇怪)。你也可以看看这个：http://jsfiddle.net/amqER/5/，它可能更像你想要的控制方案。

Answer 2

只是一些快速的性能提示。

尽量不要使用$(this).mousemove，而是将$(this)保存到一个变量中并使用该变量。

var th = $(this);
th.mousemove...

尽量避免使用$.each。这可能是导致代码速度变慢的原因。您可以将其替换为for循环，但我建议，在这种情况下，逐个发送每个元素。

var parallax = function(img){

};

parallax(img1);
parallax(img2);

instantly-increase-your-jquery-performance

Answer 3

虽然Xymostech的答案确实在原始海报的原始代码上有了很大的改进，但在Chrome中性能几乎没有提高。

当检查页面FPS时，这里发布的解决方案在视网膜MacBook专业版上以15FPS的速度运行。

我对代码进行了非常简单的更改，将其更改为使用translate3d属性而不是left。现在，它的运行速度为55-60帧/秒。我认为这是一个巨大的性能提升。

如果在Chrome中打开了“显示绘制矩形”，你会看到之前发布的解决方案是在视差运动的同时不断地绘制对dom的更改。使用translate3d解决方案，只需在视差运动的整个时间内完成零绘制。

http://jsfiddle.net/LG47e/