javascript - 提高 JavaScript 转换的性能

Question

我有一个 JavaScript 驱动的视差 slider ，改编自本教程 (http://tympanus.net/codrops/2011/01/03/parallax-slider/)，还有一个小脚本，它在滚动到某个点后使 slider 图像淡出。

这是脚本:

    $(document).ready(function() {

        $(window).scroll(function () {
            var $slider = $('.pxs_slider');
            var sTop = $('body').scrollTop();
            var sTop_ff = $('html').scrollTop();
            var opacity = 1;

            if(sTop < 40) {
                opacity = 1;
                if(sTop_ff < 40) {
                    opacity = 1;
                } else {
                    opacity = 0;
                }
            } else  {
                opacity = 0;
            }

            $slider.css('opacity', opacity);
        });
  });

一切正常，但在此过渡期间滚动变得非常缓慢。但是，我发现它只在所有浏览器的 Chrome 中才真正有这个问题。 Firefox 中没有性能下降。

我可以尝试更有效的方法来实现这种效果吗？

Answer 1

缓存 $('.pxs_slider') 所以每次滚动条移动时都不会查询是大的:

$(document).ready(function() {
    var $slider = $('.pxs_slider');

    $(window).scroll(function() {
        var sTop = $('body').scrollTop();
        var sTop_ff = $('html').scrollTop();
        var opacity = 1;

        if(sTop < 40) {
            opacity = 1;
            if(sTop_ff < 40) {
                opacity = 1;
            } else {
                opacity = 0;
            }
        } else  {
            opacity = 0;
        }

        $slider.css('opacity', opacity);
    });
});

此外，我认为 $(window).scrollTop() 是正确的方法:

$(document).ready(function() {
    var $slider = $('.pxs_slider');

    $(window).scroll(function() {
        $slider.css('opacity', $(window).scrollTop() < 40 ? 1 : 0);
    });
});