javascript - 提高背景视差滚动的性能

Question

你好 StackOverflow 社区，

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

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

我现在的问题是:可以在代码中更改哪些内容以提高性能？

这是处理视差的代码部分。在每次鼠标移动时都会执行每个循环，我认为这是性能如此缓慢的原因:

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;
});

我也放了一个 fiddle : http://jsfiddle.net/yWGDz/

提前致谢，托马斯

附言也许有人甚至会发现为什么第二层和第三层具有相同的滚动速度，但定义的速度不同。

Answer 1

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

这比原来的速度快得多(尤其是在 firefox 中，它的性能要好得多，而 chrome 仍然很慢)。我还更改了您代码中的一些逻辑，以使其更有意义。

我做过的事情的列表:

缩小你的 png

您的 2 个 png 文件超过 2 兆，所以我将它们放入 png 压缩器 ( tinypng )，这大大减小了大小。这有助于缩短加载时间并提高整体敏捷度。

尽可能重复使用值

在您的原始代码中，您在代码中写入并随后从 css left 属性中读取了几次。这样做会使它变慢很多。相反，我保留了一个 left 属性，并且只在绝对需要时才触及 $.css。每次更新时读取每个元素的宽度也是如此。

此外，就像我说的那样，我修改了您的逻辑以(我认为)更有意义，考虑到您想要完成的事情。它在每次更新时计算一个新的差异，并尝试根据该差异移动。此外，一旦其中一个图像脱落，它不会尝试继续移动(如果您一直向右移动，您的图像就会这样做，看起来真的很奇怪)。你也可以看看这个:http://jsfiddle.net/amqER/5/ ，这可能更像是您想要的控制方案。