Question

绑定多个$(window).on('scroll', fn) vs将所有逻辑合并到一个事件处理程序之间是否存在重要性能差异？

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

Answer 1

我在考虑了Bergi的评论之后修改了AlliterativeAlice的代码。使用 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();

将多个事件处理程序绑定到滚动事件会有性能损失吗？

1 个答案: