Benchmark: event delegation vs local handlers

HTML Preparation code:

<ul class='one'>
</ul>

<ul class='manyDel'>
</ul>

<ul class='manyLoc'>
</ul>

<template class='content'>
  <li><a class='link' data-x='2'></a></li>
</template>

Script Preparation code:

var templ = document.querySelector(`.content`);

var one = document.querySelector(`.one`);
one.append(templ.cloneNode(true).content);
var oneLink = one.querySelector(`.link`);

var manyDel = document.querySelector(`.manyDel`);
var manyDelLinks = [];

var manyLoc = document.querySelector(`.manyLoc`);
var manyLocLinks = [];

var x = 0;
function handleEvent(ev) {
  x += (ev.target.dataset.x|0);
}

var n = 1000;
for (let i = 0; i < n; ++i) {
  let frag = templ.cloneNode(true).content;
  manyDelLinks.push(frag.querySelector(`.link`));
  manyDel.append(frag);
  
  frag = templ.cloneNode(true).content;
  frag.querySelector(`.link`).addEventListener(`test`, handleEvent);
  manyLocLinks.push(frag.querySelector(`.link`));
  manyLoc.append(frag);
}

one.addEventListener(`test`, handleEvent);
manyDel.addEventListener(`test`, handleEvent);

Tests:

one
oneLink.dispatchEvent(new CustomEvent(`test`, {bubbles : true}));
manyDel
manyDelLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));
manyLoc
manyLocLinks[(Math.random() * n)|0].dispatchEvent(new CustomEvent(`test`, {bubbles : true}));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
one
manyDel
manyLoc

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 13; ASUS_I006D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.5304.91 Mobile Safari/537.36 OPR/73.0.3788.68491

Browser/OS: Opera Mobile 73 on Android

View result in a separate tab

Test name	Executions per second
one	81741.0 Ops/sec
manyDel	68823.6 Ops/sec
manyLoc	66163.7 Ops/sec

event delegation vs local handlers (version: 2)

Comparing performance of: one vs manyDel vs manyLoc

Created: 4 years ago by: Registered User

Jump to the latest result

one

manyDel

manyLoc

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A