1. Loose event handling on large set

Google Chrome 489.93999999999994 µ seconds

by Renoir Boulanger

HTML

<p>
Last clicked item is <code id="lastClicked">None</code>
</p>
<ul></ul>

CSS

div {opacity:0;transition: opacity 1s;}
div.show { opacity:1;}

JavaScript

let list = document.querySelector('ul')
  , maxIter = 80000;

var t0 = window.performance.now();

function clickHandler(evtObj) {
	let innerText = evtObj.target.innerText
    , lastClicked = document.querySelector('#lastClicked') || 'None';
  lastClicked.innerText = innerText;

  /**
   * Nothing fancy, just a notifier copy-pasta from MDN
   * https://developer.mozilla.org/en-US/docs/Web/API/notification
   **/
  if (!!("Notification" in window)) {
    if (Notification.permission !== 'denied') {
      Notification.requestPermission(function (permission) {
        // If the user accepts, let's create a notification
        if (permission === "granted") {
          var notification = new Notification(`Last clicked was ${innerText}`);
        }
      });
    }
  } 

}

list.addEventListener("click", clickHandler, {}, true);

function createListElement(i) {
	let el = document.createElement('li')
    , name = `Item ${i}`;
  el.setAttribute('id', name.toLowerCase().replace(' ', '-'));
  el.innerText = name;
  return el;
}

let i = 0;
while ( maxIter > i++ ) {
  list.appendChild( createListElement(i) );	
}


/** ============ Performance timing ============ **/
var t1 = window.performance.now()
  , calc = Number(t1) - Number(t0)
  , ua = window.Browser
  , uaString = `${ua.name} ${ua.version} on ${ua.platform}`
  , calcText = `${uaString} took ${calc} seconds`
  , calcFrag = document.createElement('p');

calcFrag.textContent = calcText;
document.querySelector('#lastClicked').parentNode.insertBefore(calcFrag, null);