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

}

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

2 个答案: