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

Latest run results:

Run details: (Test run date: one year 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 one year ago):

LLMs can make mistakes. Check important info.

**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**

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**

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.

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: 2 years ago by: Guest

Jump to the latest result

while loop + tagName check

event propagation

event propagation with callback

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):