MeasureThat.net

Run results for: Getting a context: closest vs while loop vs event propagation

Go to the benchmark
Run details:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Chrome 111
Linux
Desktop
one year ago
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
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;
  
  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);
    }