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

Javascript performance - how to improve performance of little script

本文关键字：性能 脚本 Javascript 何提高      更新时间：2023-09-26

>我最近做了一个网站，它使用window.scroll为元素添加一个"active"类来触发css3动画。这些动画虽然有时不会触发，但总的来说，脚本的性能非常慢。今天我在看火狐视差网站并注意到他们从未错过"触发器"并且性能很好，但我找不到他们是如何做到这一点的 - 有人对这样的网站有任何经验吗？

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

$(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和视口插件的使用。

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

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。谢谢贝尔吉。

时间花在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');
    }

暂时忽略 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 的帧速率，请随意通过更改设置超时持续时间进行调整。

缓存 jQuery 选择器也可能对某些人有所帮助，但如果你过度触发 scroll((，每次执行节省 25% 可能还不够，但无论进一步优化如何，消除工作都会更快地执行代码。

相关文章：