MeasureThat.net

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

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Chrome 124
Mac OS X 10.15.7
Desktop
11 months ago
Test name Executions per second
while loop + tagName check 745.3 Ops/sec
event propagation 137.5 Ops/sec
event propagation with callback 193.8 Ops/sec
HTML Preparation code:
AخA
 
1
<context-provider id="provider">
2
  <div>
3
    <div></div>
4
    <div></div>
5
    <div></div>
6
    <div></div>
7
    <div>
8
      <div>
9
        <span>
10
          <span>
11
            <span>abc</span>
12
          </span>
13
          def
14
          <span>
15
            <span id="foo"></span>
16
          </span>
17
        </span>
18
      </div>
19
      ghi
20
    </div>
21
  </div>
22
</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:

  • 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');
      }
    }