Benchmark: Getting a context: closest vs while loop vs event propagation

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;
  
  constructor() {
    super('context-request', {bubbles: true, composed: true});
  }
};

context.addEventListener('context-request', event => {
  event.data = 'abc';
  event.stopPropagation();
});

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest with element selector
while loop + tagName check
event propagation

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Linux

View result in a separate tab

Test name	Executions per second
closest with element selector	703.0 Ops/sec
while loop + tagName check	475.8 Ops/sec
event propagation	56.3 Ops/sec

Getting a context: closest vs while loop vs event propagation (version: 0)

Comparing performance of: closest with element selector vs while loop + tagName check vs event propagation

Created: one year ago by: Guest

Jump to the latest result

closest with element selector

while loop + tagName check

event propagation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A