Run results for: Getting a context: closest vs while loop vs event propagation with new events vs event propagation with callbacks

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 10 months ago

Test name	Executions per second
closest with element selector	1409.7 Ops/sec
while loop + tagName check	1003.1 Ops/sec
event propagation	187.8 Ops/sec
event propagation with callback	327.2 Ops/sec

HTML Preparation code:

<context-provider id="provider">
  <div>
    <div></div>
    <div>
      <span>
        <span>
          <span>abc</span>
        </span>
        def
        <span>
          <span id="foo"></span>
        </span>
      </span>
      ghi
    </div>
  </div>
</context-provider>

Script Preparation code:

var context = document.getElementById('provider');
var element = document.getElementById('foo');

var SimpleContextEvent = class SimpleContextEvent extends Event {
  data = null;
  callback = null;
  
  constructor(callback) {
    super('context-request', {bubbles: true, composed: true});
    this.callback = callback;
  }
};

context.addEventListener('context-request', event => {
  if (event.callback) {
    event.callback(context); 
  } else {
    event.data = context;
  }
  
  event.stopPropagation();
});

Tests:

closest with element selector
var i = 5000; while (i--) { let ctx = element; ctx = ctx.closest('context-provider'); if (ctx !== context) { throw new Error('mismatch'); } }
while loop + tagName check
var i = 5000; while (i--) { let ctx = element; while (ctx) { if (ctx.tagName === 'CONTEXT-PROVIDER') { break; } ctx = ctx.parentNode; } if (ctx !== context) { throw new Error('mismatch'); } }
event propagation
var i = 5000; while (i--) { let ctxEvent = new SimpleContextEvent(); element.dispatchEvent(ctxEvent); let ctx = ctxEvent.data; if (ctx !== context) { throw new Error('mismatch'); } }
event propagation with callback
var i = 5000; var ctx; var ctxEvent = new SimpleContextEvent(reply => {ctx = reply;}); while (i--) { ctx = null; element.dispatchEvent(ctxEvent); if (ctx !== context) { throw new Error('mismatch'); } }

Run results for: Getting a context: closest vs while loop vs event propagation with new events vs event propagation with callbacks

closest with element selector

while loop + tagName check

event propagation

event propagation with callback