將多個事件處理程序綁定到滾動事件是否會降低性能？

Question

綁定多個$(window).on('scroll', fn) s 與將所有邏輯組合到一個事件處理程序中是否存在顯着的性能差異？

我的代碼組織得更好，只有一個事件處理程序，但我想從這個特定模塊中獲得最快的性能。 在這個用例中，可能有 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();