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>

AخA
 
<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();
});

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

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

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
while loop + tagName check	646.5 Ops/sec
event propagation	205.5 Ops/sec
event propagation with callback	338.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Overview

The provided JSON represents a benchmark test case for measuring the performance of different approaches to getting a context in a web page. The test compares three methods: a while loop with a tagName check, event propagation with new events, and event propagation with callbacks.

Options Compared

While Loop with TagName Check: This approach uses a while loop to traverse up the DOM tree until it finds an element with the tag name "CONTEXT-PROVIDER". The loop checks if the current context is different from the expected context after each iteration.
Event Propagation with New Events: In this approach, a new event is created and dispatched to the element using element.dispatchEvent(). The event's data property is set to the expected context.
Event Propagation with Callbacks: Similar to the previous approach, but instead of setting the event's data property directly, it uses a callback function to update the context variable.

Pros and Cons

While Loop with TagName Check:
- Pros: straightforward, easy to understand
- Cons: may be slow due to the loop iteration
Event Propagation with New Events:
- Pros: efficient use of event dispatching mechanism
- Cons: may introduce additional overhead due to event creation and dispatching
Event Propagation with Callbacks:
- Pros: similar efficiency to event propagation, but avoids creating a new event object
- Cons: requires the callback function to update the context variable

Library Used

The test uses a custom SimpleContextEvent class, which extends the built-in Event class. This library is used to create events with custom properties (e.g., data and callback). The context-provider HTML element is also assumed to be a part of this library.

Special JS Feature or Syntax

The test uses some special JavaScript features:

Arrow Functions: The callback function in the event creation code uses an arrow function syntax (reply => {ctx = reply;}).
Template Literals: The HTML preparation code uses template literals (e.g., "\r\n def\r\n \r\n abc\r\n \r\n>") to create a complex HTML structure.

Other Alternatives

If the test authors want to explore alternative approaches, they could consider:

Using a different event dispatching mechanism (e.g., dispatchEvent() instead of addEventListener()).
Adding more complexity to the while loop with tagName check by introducing additional conditions or optimizations.
Changing the custom library used for creating events and context variables.

Benchmark Result

The benchmark results show that the "while loop + tagName check" approach is the fastest, followed by "event propagation with callbacks". The "event propagation" approach is the slowest. These results suggest that using event dispatching mechanisms can be an efficient way to get a context in a web page.

LLMs can make mistakes. Check important info.

**Overview**

**Options Compared**

1. **While Loop with TagName Check**: This approach uses a while loop to traverse up the DOM tree until it finds an element with the tag name "CONTEXT-PROVIDER". The loop checks if the current context is different from the expected context after each iteration.
2. **Event Propagation with New Events**: In this approach, a new event is created and dispatched to the element using `element.dispatchEvent()`. The event's data property is set to the expected context.
3. **Event Propagation with Callbacks**: Similar to the previous approach, but instead of setting the event's data property directly, it uses a callback function to update the context variable.

**Pros and Cons**

* **While Loop with TagName Check**:
	+ Pros: straightforward, easy to understand
	+ Cons: may be slow due to the loop iteration
* **Event Propagation with New Events**:
	+ Pros: efficient use of event dispatching mechanism
	+ Cons: may introduce additional overhead due to event creation and dispatching
* **Event Propagation with Callbacks**:
	+ Pros: similar efficiency to event propagation, but avoids creating a new event object
	+ Cons: requires the callback function to update the context variable

**Library Used**

The test uses a custom `SimpleContextEvent` class, which extends the built-in `Event` class. This library is used to create events with custom properties (e.g., `data` and `callback`). The `context-provider` HTML element is also assumed to be a part of this library.

**Special JS Feature or Syntax**

The test uses some special JavaScript features:

* **Arrow Functions**: The callback function in the event creation code uses an arrow function syntax (`reply => {ctx = reply;}`).
* **Template Literals**: The HTML preparation code uses template literals (e.g., `"\r\n def\r\n \r\n abc\r\n \r\n>"`) to create a complex HTML structure.

**Other Alternatives**

If the test authors want to explore alternative approaches, they could consider:

* Using a different event dispatching mechanism (e.g., `dispatchEvent()` instead of `addEventListener()`).
* Adding more complexity to the while loop with tagName check by introducing additional conditions or optimizations.
* Changing the custom library used for creating events and context variables.

**Benchmark Result**

Related benchmarks:

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