Benchmark: Single anonymous method vs reused method, web components

HTML Preparation code:

<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>
<my-em></my-el>

Tests:

Single anonymous method per element
class El extends HTMLElement { properties = { onClick: () => console.log(this.hi) } constructor () { super() this.hi = 'okay' } connectedCallback () { this.properties.onClick() } } if (!customElements.get('my-el')) { customElements.define('my-el', El) }
Single reused method for all elements
function onClick () { console.log(this.hi) } class El extends HTMLElement { constructor () { super() this.hi = 'okay' } connectedCallback () { onClick.bind(this) } } if (!customElements.get('my-el')) { customElements.define('my-el', El) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Single anonymous method per element
Single reused method for all elements

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to handling click events in web components:

1. **Single anonymous method per element**: In this approach, a new anonymous function is created for each element that needs to handle the click event.
2. **Single reused method for all elements**: In this approach, a single function is defined outside the element's scope and reused by every element that needs to handle the click event.

**What's Being Tested**

The benchmark measures the performance difference between these two approaches in terms of:

* **Browser-specific performance metrics**, such as Executions Per Second (EPS)
* **DevicePlatform**, OperatingSystem, and Browser information

**Options Compared**

The benchmark is comparing the following options:

* Option 1: Single anonymous method per element
	+ Pros:
		- Each element has its own isolated scope, which might lead to better encapsulation and less pollution of the global scope.
	+ Cons:
		- Creating a new function for each element can lead to increased overhead due to the creation and garbage collection of temporary functions.
* Option 2: Single reused method for all elements
	+ Pros:
		- Reusing the same function across multiple elements can reduce overhead due to function creation and garbage collection.
	+ Cons:
		- The global scope is polluted, which might lead to naming conflicts or unintended side effects.

**Library and Framework Considerations**

In this benchmark, the web components framework (specifically, the `customElements` API) is used to define custom elements (`my-el`). This library provides a way to create custom HTML elements that can be extended with JavaScript properties and methods. The `El` class is an example of how to define a custom element.

**Special JS Feature or Syntax**

The benchmark uses modern JavaScript features, such as:

* Arrow functions (e.g., `onClick: () => console.log(this.hi)`)
* Class syntax for defining custom elements (`class El extends HTMLElement { ... }`)
* Binding the `onClick` function to `this` using `.bind(this)` (not used in this benchmark)

**Other Alternatives**

If you need to handle click events in web components, you might consider other approaches:

* Using event listeners or event delegation instead of defining custom elements.
* Implementing a separate event handling mechanism, such as an event bus or mediator.

Keep in mind that these alternatives might not be as straightforward to implement and maintain as the web components approach used in this benchmark.

Related benchmarks:

Single anonymous method vs reused method, web components (version: 0)

Comparing performance of: Single anonymous method per element vs Single reused method for all elements

Created: 4 years ago by: Registered User

Jump to the latest result

Single anonymous method per element

Single reused method for all elements

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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