Benchmark: custom element vs div init

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

class Custom extends HTMLElement {
    constructor() {
        super()
    }
}

customElements.define("custom-me", Custom)

function create() {
    return document.createElement('div')
}

Tests:

div
for(let i = 0; i< 10000; i++){create()}
class
for(let i = 0; i< 10000; i++){new Custom()}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
div
class

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Test name	Executions per second
div	554.0 Ops/sec
class	108.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of creating HTML elements using two different approaches: creating a standard `<div>` element and instantiating a custom HTML element defined by a class that extends `HTMLElement`. Below are the details comparing the options along with the pros and cons of each approach.

### Options Compared

1. **Creating a `<div>` Element:**
   - **Test Case:** `for(let i = 0; i < 10000; i++) { create() }`
   - This creates a standard HTML `<div>` element using the `document.createElement` method.

2. **Instantiating a Custom Element:**
   - **Test Case:** `for(let i = 0; i < 10000; i++) { new Custom() }`
   - This involves creating an instance of a custom HTML element (`<custom-me>`) defined by a class `Custom` that extends `HTMLElement`.

### Performance Results

The benchmark results indicate the execution rate (i.e., how many times each operation could be performed per second):

- **`div` Creation: 797.85 executions per second**
- **`class` (Custom Element) Creation: 198.45 executions per second**

From these results, we can see that creating a standard `<div>` element is significantly faster than instantiating a custom element.

### Pros and Cons

1. **Creating a `<div>` Element:**
   - **Pros:**
     - Faster and more efficient for standard use cases.
     - Minimal overhead since it doesn't involve any additional features of custom elements.
   - **Cons:**
     - Lacks the encapsulation and functionality associated with custom elements.
     - Cannot use custom behavior, lifecycle methods, or attributes beyond what standard elements support.

2. **Instantiating a Custom Element:**
   - **Pros:**
     - Helps encapsulate styles and behavior specific to the element, allowing for modular and reusable components.
     - Leverages custom element features like lifecycle callbacks (e.g., `connectedCallback`, `disconnectedCallback`).
   - **Cons:**
     - Slower performance compared to standard elements due to the overhead required for additional features and functionality.
     - May introduce complexity, especially if not needed for simple cases.

### Other Considerations

- **Use Cases:** If your application requires modular components with encapsulated functionality and styling, custom elements are suitable despite their performance cost. Conversely, if high performance is necessary and the element doesn't require custom behavior, standard elements are the better choice.
- **Browser Support:** Both options generally have good browser support, but custom elements (part of the Web Components standard) may require polyfills in older browsers.

### Alternatives

- **Virtual DOM Libraries:** Consider using libraries like React or Vue.js, which can potentially provide efficient DOM manipulation through a virtual DOM representation.
- **Direct DOM Manipulation:** Traditional direct DOM manipulation (without custom elements) is an alternative for simple applications; however, it often leads to less maintainable code and complex interactions.

In conclusion, while the use of custom elements provides powerful capabilities for building complex and reusable components, their higher instantiation cost compared to standard elements should be considered in performance-sensitive applications.

Related benchmarks:

custom element vs div init (version: 1)

Comparing performance of: div vs class

Created: one year ago by: Guest

Jump to the latest result

div

class

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):