处理窗口滚动的方法

时间:2016-12-09 13:24:41

标签: javascript performance

假设我有一些类的N个实例 每个实例都必须通过窗口滚动进行一些计算 有两种方法可以做到:

1)每个实例都有自己的scroll处理程序:

var N = 100,
    i;

var FirstWay = function() {
    this.doSomeCalculations = function() {
        // some calculations here
    };

    window.addEventListener( 'scroll', this.doSomeCalculations );
};

for ( i = 0; i < N; i++ ) {
    new FirstWay();
}

2)运行所有实例的单滚动处理程序:

var N = 100,
    i,
    instances = [];

var SecondWay = function() {
    this.doSomeCalculations = function() {
        // some calculations here
    };
};

var doCommonCalculations = function() {
    var i;

    for ( i = 0; i < N; i++ ) {
        instances[ i ].doSomeCalculations();
    }
};

for ( i = 0; i < N; i++ ) {
    instances.push( new SecondWay() );
}

window.addEventListener( 'scroll', doCommonCalculations );

所以,我的问题是,哪种方式在性能方面更好?

2 个答案:

答案 0 :(得分:1)

在您的第一个示例中,您正在为每个实例注册一个事件侦听器 触发该事件时,每个实例都会调用一些函数。

在第二个例子中,您正在注册一个事件监听器 触发该事件时,每个实例都会调用一些函数。

什么会更快?

  1. 调用某个函数的10个事件处理程序
  2. 1个事件处理程序调用一些函数10次?
  3. 据我所知,2更快。

    但话又说回来,差异几乎可以忽略不计。除非你真的记录了数以百万计的事件处理程序,否则我怀疑差异是否可以衡量。

答案 1 :(得分:1)

这种事情的规则是直截了当的:编写简单的代码。简单的代码是否运作良好?好的,你完成了。没有?诊断原因,并解决该问题。例如,担心它如果它成为一个问题。

猜测一下,我敢打赌,这两种方式并不重要。您可以在列表中使用处理程序(浏览器中的列表&s事件处理,或者您列出的列表)。但不要猜测,衡量(如果需要)

现在,如果处理程序需要做的计算是非常复杂和耗时的他们有共同的计算,那么第二种方式的复杂性就是一个原因:您可以执行一次这些计算并重复使用结果。