Benchmark: Getting a context: while loop vs event propagation with new events vs event propagation with callbacks

HTML Preparation code:

<context-provider id="provider">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>
      <div>
        <span>
          <span>
            <span>abc</span>
          </span>
          def
          <span>
            <span id="foo"></span>
          </span>
        </span>
      </div>
      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:

while loop + tagName check
var i = 5000; while (i--) { let ctx = element; while (ctx && ctx.nodeName !== 'CONTEXT-PROVIDER') { ctx = ctx.assignedSlot || ctx.parentNode || ctx.host; } 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'); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while loop + tagName check
event propagation
event propagation with callback

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: 12 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 YaBrowser/24.4.1.862.10 YaApp_iOS/2404.1 YaApp_iOS_Browser/2404.1 Safari/604.1 SA/3

Browser/OS: Yandex Browser 24 on iOS 17.4.1

View result in a separate tab

Test name	Executions per second
while loop + tagName check	1092.9 Ops/sec
event propagation	247.0 Ops/sec
event propagation with callback	345.8 Ops/sec

Getting a context: while loop vs event propagation with new events vs event propagation with callbacks (version: 0)

Comparing performance of: while loop + tagName check vs event propagation vs event propagation with callback

Created: one year ago by: Guest

Jump to the latest result

while loop + tagName check

event propagation

event propagation with callback

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A