0

我最近做了一个网站，它使用 window.scroll 向元素添加一个“活动”类来触发 css3 动画。这些动画虽然有时没有触发，但总而言之，脚本的性能非常缓慢。今天我在看firefox视差网站 ，发现他们从来没有错过一个“触发器”，性能很好，但我找不到他们是如何做到这一点的——有人对这样的网站有任何经验吗？

我的代码现在看起来像这样......

$(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 插件..

4

3 回答 3

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 上滚动的文章。我建议在修复之前阅读它：滚动性能

编辑：固定:in-viewport。谢谢伯吉。

于 2013-10-09T19:39:48.697 回答
0

时间花在你的 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');
    }
于 2013-10-09T19:24:58.473 回答
0

现在忽略 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% 可能还不够，但无论要进行进一步优化，消除工作都会更快地执行代码。

于 2013-10-09T20:16:26.073 回答