JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

CSS

body{
  font-family: monospace;
  text-align: right;
}

JavaScript

/**
 * Mass event bind perf test
 */

var output = 0,
		last = new Date().getTime(),
    function_group = [],
    runs = 50000,
    bind_type = 2;

var addnew = function(){
  output += 1;
}

var render = function(){
	var now = new Date().getTime();
	var delta = now - last;
  last = now;
  document.body.innerHTML = delta + 'ms delta | ' + (output === runs ? output + ' runs completed' : (runs - output) + ' runs failed') + ' | ' + (bind_type === 1 ? 'Individual listeners' : 'Single listener');
  output = 0;
}

if(bind_type === 1){

  /**
   * Individual listeners
   */
  for(var i = 0; i < runs; i++){
    window.addEventListener('resize', function(){ addnew(); });
  }
  window.addEventListener('resize', render);

}else if(bind_type === 2){

  /**
   * Single listener
   */
  for(var i = 0; i < runs; i++){
    function_group.push(addnew);
  }
  function_group.push(render);

  window.addEventListener('resize', function(){
    for(var i = 0; i < function_group.length; i++){
      function_group[i].call(null);
    }
  });

}