Question

我最近创建了一个使用window.scroll的网站，为元素添加一个“active”类来触发css3动画。这些动画虽然有时并没有激发，但剧本的所有表现都很慢。今天我看着firefox parallax site 并注意到他们从未错过任何“触发器”，表现很好，但我无法找到他们是如何实现这一点的 - 任何人都有这样的网站的经验吗？

我的代码目前看起来像这样......

$(window).scroll(function(){    
    if ( $('.trigger:in-viewport:first.trigger5').length )
    {
        $('[rel=counter]').addClass('active');
        $('[rel=discover]').removeClass('active');
        $('[rel=follow]').removeClass('active');
        $('[rel=sync]').removeClass('active');
    }

我觉得它使用了jQuery和viewport插件..

Answer 1

首先也是显而易见的事情：

var $window = $( window );
var DOM = {
    counter: $( '[rel=counter]' ),
    discover: $( '[rel=discover]' ),
    follow: $( '[rel=follow]' ),
    sync: $( '[rel=sync] ')
};

function doThingsOnScroll() {    
    if ( $( '.trigger:in-viewport:first.trigger5' ).length ) {
        DOM.counter.addClass('active');
        DOM.discover.removeClass('active');
        DOM.follow.removeClass('active');
        DOM.sync.removeClass('active');
    }
}

$window.scroll( doThingsOnScroll );

与评论一样：您必须缓存查询。对DOM的操作非常重要。取元素一次并使用它们。

可以帮助的另一件事是强调功能节流。 http://underscorejs.org/#throttle

var throttled = _.throttle( doThingsOnScroll, 100 );
$window.scroll( throttled );

前段时间，Paul Lewis撰写了关于在html5rocks上滚动的文章。我建议在修复之前阅读它：Scrolling Performance

编辑：修正:in-viewport。谢谢Bergi。

Answer 2

时间花在jQuery选择器上。只需先在变量中执行和存储选择器。然后在将来使用这些变量。例如：

var $firstTrigger = $('.trigger:in-viewport:first.trigger5');
var $counter = $('[rel=counter]');
var $discover = $('[rel=discover]');
var $follow = $('[rel=follow]');
var $sync = $('[rel=sync]');

$(window).scroll(function(){    
    if ( $firstTrigger.length )
    {
        $counter.addClass('active');
        $discover.removeClass('active');
        $follow.removeClass('active');
        $sync.removeClass('active');
    }

Answer 3

暂时忽略dom-heavy的调用，由于scroll（）的快速启动，你的整体模式非常重CPU。

我们只能经常调用它而不是总是大幅减少cpu，尤其是在移动设备或其他弱设备上：

function doScroll(){    
    if ( $('.trigger:in-viewport:first.trigger5').length )
    {
        $('[rel=counter]').addClass('active');
        $('[rel=discover]').removeClass('active');
        $('[rel=follow]').removeClass('active');
        $('[rel=sync]').removeClass('active');
    }
}

$(window).scroll(function dome(){
  clearTimeout(dome.timer);
  dome.timer=setTimeout(doScroll, 100);
})

这适用于10FPS的帧速率，可以通过改变setTimeout持续时间进行调整。

缓存jQuery选择器也可能有所帮助，但是如果你过度触发scroll（），那么在每次执行中节省25％可能是不够的，但是无论进一步优化如何，消除工作都会更快地执行代码做成。

Javascript性能 - 如何提高小脚本的性能

3 个答案: