Benchmark: jsperfwasmuchmorecomfortable

Script Preparation code:

const targetElem = document.createElement( 'DIV' );
targetElem.id = 'target';

targetElem.innerHTML = `
	<div>
		<span>Child 1</span>
	</div>
	<div>
		<span>Child 2</span>
	</div>
	<div>
		<span>Child 3</span>
	</div>
`;

document.body.appendChild( targetElem );

Tests:

A - innerHTML
document.getElementById( 'target' ).innerHTML += ` <div> <span>Child 4</span> </div> `;
B - insertAdjacentHTML
document.getElementById( 'target' ).insertAdjacentHTML( 'beforeend', ` <div> <span>Child 4</span> </div> `);
C - createElement
const newChild = document.createElement( 'DIV' ); const newChildChild = document.createElement( 'SPAN' ); newChildChild.innerHTML = 'Child 4'; newChild.appendChild( newChildChild ); document.getElementById( 'target' ).appendChild( newChild );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
A - innerHTML
B - insertAdjacentHTML
C - createElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

Browser/OS: Chrome 84 on Windows

View result in a separate tab

Test name	Executions per second
A - innerHTML	79.3 Ops/sec
B - insertAdjacentHTML	100956.2 Ops/sec
C - createElement	123356.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data for MeasureThat.net.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for adding child elements to an HTML element. The `Script Preparation Code` section creates a target HTML element and appends existing child elements using the `innerHTML` property, while the `Html Preparation Code` section is empty. This means that only the script preparation code is executed before running each test case.

**Test Cases**

There are three test cases:

1. **A - innerHTML**: This test case compares adding a new child element to an existing HTML string using the `innerHTML` property.
2. **B - insertAdjacentHTML**: This test case compares adding a new child element to an existing HTML element using the `insertAdjacentHTML` method.
3. **C - createElement**: This test case compares creating a new child element from scratch and appending it to another element.

**Pros and Cons of each approach**

1. **innerHTML**:
	* Pros: Simple, easy to use, and widely supported.
	* Cons: Can lead to security issues if user-controlled input is used, as it can execute arbitrary JavaScript code.
2. **insertAdjacentHTML**:
	* Pros: More secure than `innerHTML`, as it doesn't execute arbitrary JavaScript code, and can be more efficient for large strings.
	* Cons: Requires a DOM element reference (in this case, the target element), which can add complexity to the code.
3. **createElement**:
	* Pros: Creates a new element without modifying an existing one, which can be beneficial for performance or security reasons.
	* Cons: Requires more code and can be slower than using `innerHTML` or `insertAdjacentHTML`.

**Libraries and special features**

None of the test cases use any libraries. However, it's worth noting that `insertAdjacentHTML` is a part of the HTML5 specification, which may not be supported in older browsers.

No special JavaScript features are used in these test cases.

**Alternatives**

Other alternatives for adding child elements to an HTML element include:

* Using a template engine like Handlebars or Mustache
* Creating a new element using a library like React or Angular
* Using the `textContent` property instead of `innerHTML`
* Using a custom solution with DOM manipulation (e.g., creating a new node and appending it to the target element)

These alternatives may offer different trade-offs in terms of performance, security, and complexity.

Related benchmarks:

jsperfwasmuchmorecomfortable (version: 0)

...

Comparing performance of: A - innerHTML vs B - insertAdjacentHTML vs C - createElement

Created: 4 years ago by: Guest

Jump to the latest result

A - innerHTML

B - insertAdjacentHTML

C - createElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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