Run results for: event delegation: closest vs cached

Run details:

User agent: Mozilla/5.0 (Linux; Android 8.0.0; SAMSUNG SM-A530F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/16.2 Chrome/92.0.4515.166 Mobile Safari/537.36

Browser: Chrome Mobile 92

Operating system: Android 8.0.0

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
manyC	14680.8 Ops/sec
manyW	15512.4 Ops/sec

HTML Preparation code:

<ul class='manyC'>
</ul>

<ul class='manyW'>
</ul>

<template class='content'>
  <li data-x='2'>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    <div>
      	<a class='link'></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
  </li>
</template>

Script Preparation code:

var templ = document.querySelector(`.content`);

var manyC = document.querySelector(`.manyC`);
var manyCLinks = [];

var manyW = document.querySelector(`.manyW`);
var manyWLinks = [];

var x = 0;
function handleEvent(li) {
  x += (li.dataset.x|0);
}

function cHandleEvent(ev) {
  handleEvent(ev.target.closest(`li`));
}

const k = Symbol();
function wHandleEvent(ev) {
  let t= ev.target;
  let li = t[k];
  if (li === undefined) {
    t[k] = li = ev.target.closest(`li`)
  }
  handleEvent(li);
}

var n = 1000;
for (let i = 0; i < n; ++i) {
  let frag = templ.cloneNode(true).content;
  manyCLinks.push(frag.querySelector(`.link`));
  manyC.append(frag);

  frag = templ.cloneNode(true).content;
  manyWLinks.push(frag.querySelector(`.link`));
  manyW.append(frag);
}

debugger;
manyC.addEventListener(`test`, cHandleEvent);
manyW.addEventListener(`test`, wHandleEvent);

Tests:

manyC
manyCLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));
manyW
manyWLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));