Benchmark: Compare appendChild after createElement, vs appendChild after getElementById

Compare appendChild after createElement, vs appendChild after getElementById (version: 3)

Comparing performance of: appendChild after createElement vs appendChild after getElementById vs appendChild after createElement (with cloneNode) vs appendChild after getElementById (with cloneNode) vs appendChild to fragment, then append after createElement vs appendChild to fragment, then append after getElementById vs appendChild to fragment, then append after createElement (with cloneNode) vs appendChild to fragment, then append after getElementById (with cloneNode)

Created: 4 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<section id="container"></section>

Tests:

appendChild after createElement
let container = document.createElement("section"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = document.createElement("div"); }
appendChild after getElementById
let container = document.getElementById("container"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = document.createElement("div"); }
appendChild after createElement (with cloneNode)
let container = document.createElement("section"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = elem.cloneNode(); }
appendChild after getElementById (with cloneNode)
let container = document.getElementById("container"); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { container.appendChild(elem); elem = elem.cloneNode(); }
appendChild to fragment, then append after createElement
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.createElement("div"); } let container = document.createElement("section"); container.appendChild(elem)
appendChild to fragment, then append after getElementById
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.createElement("div"); } let container = document.getElementById("container"); container.appendChild(elem)
appendChild to fragment, then append after createElement (with cloneNode)
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.cloneNode(); } let container = document.createElement("section"); container.appendChild(elem)
appendChild to fragment, then append after getElementById (with cloneNode)
let fragment = document.createDocumentFragment(""); let elem = document.createElement("div"); for (let i = 0; i < 100; i++) { fragment.appendChild(elem); elem = document.cloneNode(); } let container = document.getElementById("container"); container.appendChild(elem)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
appendChild after createElement
appendChild after getElementById
appendChild after createElement (with cloneNode)
appendChild after getElementById (with cloneNode)
appendChild to fragment, then append after createElement
appendChild to fragment, then append after getElementById
appendChild to fragment, then append after createElement (with cloneNode)
appendChild to fragment, then append after getElementById (with cloneNode)

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.

I'll break down the provided benchmark json and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The website `MeasureThat.net` allows users to create and run JavaScript microbenchmarks. In this case, we have a single benchmark definition that compares two approaches:

*   Creating an element using `document.createElement()` followed by appending it to another element (`appendChild`).
*   Retrieving an existing element using `document.getElementById()` followed by appending it to another element (`appendChild`).

This comparison aims to evaluate the performance differences between these two methods, considering various factors such as DOM traversal, element creation, and appending.

**Options Compared**

The two options being compared are:

1.  **Create element using `document.createElement()`**: This method creates a new HTML element from scratch.
2.  **Retrieve element using `document.getElementById()`**: This method retrieves an existing HTML element by its ID.

**Pros and Cons of Each Approach**

*   **`document.createElement()`**:
    *   Pros:
        *   Can be faster for large numbers of elements, as it avoids DOM traversal.
        *   More control over the element's attributes and properties.
    *   Cons:
        *   Requires creating a new element from scratch, which can lead to memory allocation overhead.
        *   May not be suitable for situations where an existing element needs to be used.

*   **`document.getElementById()`**:
    *   Pros:
        *   Faster than `createElement` for small numbers of elements, as it leverages the browser's caching mechanism.
        *   Suitable for situations where an existing element needs to be used.
    *   Cons:
        *   Requires traversing the DOM tree to find the element with the specified ID.
        *   May not be suitable for large numbers of elements due to potential performance issues.

**Other Considerations**

*   **CloneNode()**: Some test cases use `cloneNode()` instead of creating a new element. This method creates a deep copy of an existing element, which can be faster but also consumes more memory.
*   **DocumentFragment**: Another test case uses `document.createDocumentFragment()` to create a fragment and then appends elements to it. This approach can be faster for large numbers of elements, as it avoids DOM traversal.

**Library**

None of the provided benchmark definitions rely on any specific JavaScript library. They use only built-in JavaScript functions and DOM APIs.

**Special JS Features or Syntax**

There are no special JS features or syntax used in these benchmark definitions. They focus solely on comparing two simple approaches to appending elements to a container element using `appendChild`.

Now, regarding the provided test results for Firefox 91 on Mac OS X 10.15:

*   The top-performing test is "AppendChild after getElementById (with cloneNode)", with an average of around 1,791 executions per second.
*   The next fastest tests are "AppendChild after createElement" and "AppendChild after getElementById", with averages of approximately 1,174 and 912 executions per second, respectively.

These results suggest that using `document.getElementById()` followed by appending to an element (`appendChild`) with cloning can be a faster approach than creating elements from scratch for this specific use case.

Related benchmarks: