Benchmark: innerHTML vs. replaceChildren (iframe insertion)

HTML Preparation code:

<div class="adCont">
    <p>TestLabel</p>
    <h2>TestHeadline</h2>
</div>

Tests:

innerHTML
const adCont = document.querySelector(".adCont"); const obj = { width: 300, height: 250, entryPoint: "./path/to/iframe.html", }; adCont.innerHTML = `<iframe width="${obj.width}" height="${obj.height}" src="${obj.entryPoint}"></iframe>`;
replaceChildren
const adCont = document.querySelector(".adCont"); const obj = { width: 300, height: 250, entryPoint: "./path/to/iframe.html", }; const ADiframe = document.createElement("iframe"); ADiframe.width = obj.width; ADiframe.height = obj.height; ADiframe.src = obj.entryPoint; adCont.replaceChildren(ADiframe);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 135 on Ubuntu

View result in a separate tab

Test name	Executions per second
innerHTML	647.4 Ops/sec
replaceChildren	605.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance difference between two approaches: using `innerHTML` to insert an iframe into a DOM element versus using `replaceChildren` with iframe creation.

**Script Preparation Code**

The script preparation code is empty, indicating that no additional setup or initialization is required for this benchmark.

**Html Preparation Code**

The html preparation code defines a simple HTML structure consisting of a `<div>` element with a class name "adCont", containing two elements: a paragraph and an h2 heading. This HTML will serve as the target DOM element for inserting the iframe.

**Benchmark Definition JSON**

The benchmark definition consists of two test cases:

1. **innerHTML**: This test case sets the `innerHTML` property of the `.adCont` element to an iframe with specified width, height, and src attributes.
2. **replaceChildren**: This test case creates a new iframe element using `document.createElement()` and then replaces the existing children of the `.adCont` element with this new iframe.

**Options Compared**

The two approaches are compared in terms of their performance:

* **innerHTML**: Sets the iframe's content directly within the DOM element.
* **replaceChildren**: Replaces the entire content of the DOM element with a new element (in this case, an iframe).

**Pros and Cons of Each Approach**

1. **innerHTML**:
	* Pros: Simple to implement, no need for additional DOM manipulation.
	* Cons: Can be slower due to the overhead of setting inner HTML, especially for larger elements or complex content.
2. **replaceChildren**:
	* Pros: Allows for more control over the DOM structure and can be faster for certain use cases (e.g., when replacing a large amount of content).
	* Cons: Requires creating a new element, which can add overhead.

**Library Used**

None are mentioned in the benchmark definition JSON.

**Special JS Features/Syntax**

No special JavaScript features or syntax are used in this benchmark. Both approaches rely on standard DOM methods and JavaScript syntax.

**Benchmark Results**

The latest benchmark results show that the `replaceChildren` approach outperforms the `innerHTML` approach, with 1694.85009765625 executions per second compared to 1640.4339599609375 for `innerHTML`. These results suggest that using `replaceChildren` can be faster in this specific scenario.

**Alternative Approaches**

Other alternatives to consider when inserting iframes into DOM elements include:

1. **appendChild**: Appends the iframe to the end of the element's children, rather than replacing its content.
2. **insertAdjacentHTML**: Inserts HTML content into a specified position within an element (e.g., before or after the existing content).
3. **CSS Inlines**: Using CSS to inline the iframe content directly in the HTML document.

Each alternative has its own trade-offs and may be more suitable for specific use cases than the `innerHTML` and `replaceChildren` approaches.

Related benchmarks:

innerHTML vs. replaceChildren (iframe insertion) (version: 0)

Comparing performance of: innerHTML vs replaceChildren

Created: one year ago by: Guest

Jump to the latest result

innerHTML

replaceChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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