Question

假设我有一些类的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 );

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

Answer 1

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

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

什么会更快？

调用某个函数的10个事件处理程序
1个事件处理程序调用一些函数10次？

据我所知，2更快。

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

Answer 2

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

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

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

处理窗口滚动的方法

2 个答案: