Benchmark: clear html node children

HTML Preparation code:

<div id='x'></div>

Script Preparation code:

const root = document.getElementById('x');

for (let i = 0; i < 500; i++) {
	let notRoot = document.createElement('div')
    notRoot.innerHTML = `the rainbow eats sunlight under jupiter's moonlight ${Math.random()}`;
	root.appendChild(notRoot);
}

Tests:

innerHTML
const root = document.getElementById('x'); root.innerHTML = '';
removeChild firstChild
const root = document.getElementById('x'); while (root.firstChild) root.removeChild(root.firstChild);
removeChild lastChild
const root = document.getElementById('x'); while (root.lastChild) root.removeChild(root.lastChild);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild firstChild
removeChild lastChild

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.

The provided JSON represents a benchmarking test for comparing the performance of three different approaches to remove HTML elements from a DOM node: `innerHTML`, `removeChild firstChild`, and `removeChild lastChild`.

**Options being compared:**

1. `innerHTML`: This approach sets the inner HTML of an element to an empty string, effectively removing all child nodes.
2. `removeChild firstChild`: This approach iterates through the child nodes of an element, starting from the first child node (`firstChild`), and removes each one using the `removeChild` method.
3. `removeChild lastChild`: This approach iterates through the child nodes of an element, starting from the last child node (`lastChild`), and removes each one using the `removeChild` method.

**Pros and Cons:**

* `innerHTML`:
	+ Pros: Simple and concise code, easy to implement.
	+ Cons: May not be as efficient as other approaches, especially for large numbers of child nodes, since it creates a new DOM document and then re-parses the HTML string.
* `removeChild firstChild`:
	+ Pros: Can be more efficient than `innerHTML`, especially when removing only one or a few child nodes, since it only iterates through each level of nesting once.
	+ Cons: May require additional loop logic to handle all levels of nesting, which can increase code complexity and potential for errors.
* `removeChild lastChild`:
	+ Pros: Similar to `removeChild firstChild`, but starts from the last child node instead, which may be beneficial when removing only one or a few child nodes at the end.
	+ Cons: May require additional loop logic to handle all levels of nesting, similar to `removeChild firstChild`.

**Library/Feature usage:** None

**Special JS feature/syntax:** None mentioned in the provided code

The benchmarking test aims to measure the performance differences between these three approaches on various devices and browsers. The results provide insight into which approach is most efficient for removing HTML elements from a DOM node.

**Other alternatives:**

1. `innerHTML.replaceWith()` or `textContent`: These methods also remove child nodes, but with slightly different syntax and potential performance characteristics compared to the approaches tested.
2. Using the `DOMException` event handler to handle removal of child nodes: This approach involves setting an event handler on the element that triggers a removal event when the element is modified (e.g., its children are removed). While it may provide more flexibility, it can also introduce additional overhead and complexity.

In summary, the benchmarking test compares three approaches for removing HTML elements from a DOM node: `innerHTML`, `removeChild firstChild`, and `removeChild lastChild`. The results highlight the relative performance characteristics of each approach on different devices and browsers.

Related benchmarks:

clear html node children (version: 0)

compare removing elements via innerHTML and removeChild

Comparing performance of: innerHTML vs removeChild firstChild vs removeChild lastChild

Created: 7 years ago by: Guest

Jump to the latest result

innerHTML

removeChild firstChild

removeChild lastChild

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):