Run results for: Single window vs multiple input handlers

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Browser: Firefox 103

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Single window handler	78.7 Ops/sec
Multiple input handlers	0.5 Ops/sec

HTML Preparation code:

<input id='input1' />
<input id='input2' />
<input id='input3' />
<input id='input4' />
<input id='input5' />
<input id='input6' />
<input id='input7' />
<input id='input8' />
<input id='input9' />
<input id='input10' />

Script Preparation code:

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const input4 = document.getElementById('input4');
const input5 = document.getElementById('input5');
const input6 = document.getElementById('input6');
const input7 = document.getElementById('input7');
const input8 = document.getElementById('input8');
const input9 = document.getElementById('input9');
const input10 = document.getElementById('input10');

Tests:

Single window handler
const onKeyDown = (e) => console.log({e}); const handlers = new Map(); const multiListener = (e) => { if (handlers.has(e.target)) { handlers.get(e.target)(e) } } window.addEventListener('keydown', multiListener, false); handlers.set(input1, onKeyDown); handlers.set(input2, onKeyDown); handlers.set(input3, onKeyDown); handlers.set(input4, onKeyDown); handlers.set(input5, onKeyDown); handlers.set(input6, onKeyDown); handlers.set(input7, onKeyDown); handlers.set(input8, onKeyDown); handlers.set(input9, onKeyDown); handlers.set(input10, onKeyDown); for(var i=0; i<100; i++){ input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); }
Multiple input handlers
const onKeyDown = (e) => console.log({e}); input1.addEventListener('keydown', onKeyDown, false); input2.addEventListener('keydown', onKeyDown, false); input3.addEventListener('keydown', onKeyDown, false); input4.addEventListener('keydown', onKeyDown, false); input5.addEventListener('keydown', onKeyDown, false); input6.addEventListener('keydown', onKeyDown, false); input7.addEventListener('keydown', onKeyDown, false); input8.addEventListener('keydown', onKeyDown, false); input9.addEventListener('keydown', onKeyDown, false); input10.addEventListener('keydown', onKeyDown, false); for(var i=0; i<100; i++){ input1.dispatchEvent(new Event('focus')); input1.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input2.dispatchEvent(new Event('focus')); input2.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input3.dispatchEvent(new Event('focus')); input3.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input4.dispatchEvent(new Event('focus')); input4.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input5.dispatchEvent(new Event('focus')); input5.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input6.dispatchEvent(new Event('focus')); input6.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input7.dispatchEvent(new Event('focus')); input7.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input8.dispatchEvent(new Event('focus')); input8.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input9.dispatchEvent(new Event('focus')); input9.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); input10.dispatchEvent(new Event('focus')); input10.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'})); }

Run results for: Single window vs multiple input handlers

Single window handler

Multiple input handlers