MeasureThat.net

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

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Chrome 131
Windows
Desktop
3 months ago
Test name Executions per second
closest with element selector 468.3 Ops/sec
while loop + tagName check 409.0 Ops/sec
event propagation 81.5 Ops/sec
event propagation with callback 122.7 Ops/sec
HTML Preparation code:
AخA
 
1
<context-provider id="provider">
2
  <div>
3
    <div></div>
4
    <div>
5
      <span>
6
        <span>
7
          <span>abc</span>
8
        </span>
9
        def
10
        <span>
11
          <span id="foo"></span>
12
        </span>
13
      </span>
14
      ghi
15
    </div>
16
  </div>
17
</context-provider>
Script Preparation code:
​x
 
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');
      }
    }