将多个事件处理程序绑定到滚动事件是否会降低性能？

Question

绑定多个$(window).on('scroll', fn)s 与将所有逻辑组合到一个事件处理程序之间是否存在显着 性能差异？ p>

我的代码只使用一个事件处理程序就可以更好地组织，但我希望从这个特定模块中获得最快的性能。在这个用例中，可能有 10~100 个处理程序附加到滚动事件。

Answer 1

在考虑了 Bergi 的评论后，我修改了 AllitativeAlice 的代码。在 Chrome 中使用原生滚动事件 我没有发现这两种方法的速度有任何显着差异。通过复制粘贴到该网页的 JavaScript 控制台运行下面的代码，你会得到什么结果？...

function log() {
  console.log(Array.prototype.join.call(arguments, ' '))
}

var count100 = 0;
var count1 = 0;

function test100() {
  $(window).off('scroll');
  for (var i = 0; i < 100; i++) {
    $(window).on('scroll', function() {
      count100++;
    });
  }
  var startTime = performance.now();

  for (var x = 0; x < 100; x++) {
    window.scroll(0, 0);

    for (var j = 0; j < 100; j++) {
      window.scroll(0, j + 1);
    }
  }

  var endTime = performance.now();
  log("100 handlers: ", endTime - startTime);
}


function test1() {
  var count = 0;
  $(window).off('scroll');
  var fns = [];
  for (var i = 0; i < 100; i++) {
    fns.push(function() {
      count1++;
    });
  }

  $(window).on('scroll', function() {
    fns.forEach(function(f) {
      f();
    })
  });

  var startTime = performance.now();

  for (var x = 0; x < 100; x++) {
    window.scroll(0, 0);

    for (var j = 0; j < 100; j++) {
      window.scroll(0, j + 1);
    }
  }

  var endTime = performance.now();
  log("1 handler: ", endTime - startTime);
}

var testCount = 0;
var numberOfRuns = 20;

function logCount() {
  console.log("-->count1: ", count1);
  console.log("-->count100: ", count100);
}

function runTestA() {
  test1();
  if (++testCount<numberOfRuns) setTimeout(runTestB, 10);
  else setTimeout(logCount, 10);
}

function runTestB() {
  test100();
  if (++testCount<numberOfRuns) setTimeout(runTestA, 10);
  else setTimeout(logCount, 10);
}

runTestA();