javascript - 无论如何优化这个视差脚本以获得更好的性能？

Question

我有一个视差脚本，用于减慢元素相对于窗口滚动的背景位置。它在我的 macbook pro 上表现出色，但在速度较慢的计算机上，它比我认为需要的更颤抖。

下面是代码：

    var bgobj = $('.paral');

    $(window).scroll(function () {

        onScroll(bgobj);

    });

function onScroll(bgobj) {

    var $window = $(window);

    var yPos = ($window.scrollTop() / bgobj.data('speed'));
    // Put together our final background position
    var coords = yPos + 'px';

    // Move the background
    bgobj.css({ backgroundPositionY: coords });

}

所以我的问题是，可以对代码进行哪些优化以提高较低机器的速度？

谢谢

Answer 1

你考虑过节流吗？

http://underscorejs.org/#throttle

http://underscorejs.org/#debounce

var bgobj = $('.paral');

var onScrollThrottled = _.throttle(onScroll, 100);

$(window).scroll(function () {

    onScrollThrottled(bgobj);

});

function onScroll(bgobj) {

    var $window = $(window);

     var yPos = ($window.scrollTop() / bgobj.data('speed'));
     // Put together our final background position
     var coords = yPos + 'px';

     // Move the background
     bgobj.css({ backgroundPositionY: coords });

     if (isScrolledIntoView($('#more-info'))) {

         animateCircle();

     }
}

当然，您可以将优化应用于 animateCirle 或更新背景 css，而不是对整个 onScroll 函数进行节流/去抖动

Answer 2

我看到需要做一些小的改进。没什么大不了的：

//cache $window and speed

var $window = $(window);
var bgobj = $('.paral');
var speed = bgobj.data('speed')

$window.scroll(function () {
    onScroll(bgobj);
});

function onScroll(bgobj) {



var yPos = ($window.scrollTop() / speed);
// Put together our final background position
//var coords = yPos + 'px'; // this is not needad as jQuery defaults to pixels if nothing is specified

// Move the background
bgobj.css({ backgroundPositionY: coords });

if (isScrolledIntoView($('#more-info'))) { // depending on what is inside this function, this might slow everything doen

    animateCircle();

}