Benchmark: innerHTML vs. removeChild vs. jQuery.html()

HTML Preparation code:

<div id='test'>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

function removeAllNodeChildren(node) {
    while (node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }
    return node;
}

function purge(node) {
    if (node.hasChildNodes()) {
        node.innerHTML = '';
    }
    return node;
}

Tests:

removeChild
removeAllNodeChildren(document.getElementById('test').cloneNode(true));
innerHTML
purge(document.getElementById('test').cloneNode(true));
jQuery
$(document.getElementById('test').cloneNode(true)).html('')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
removeChild
innerHTML
jQuery

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G611MT) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/17.0 Chrome/96.0.4664.104 Mobile Safari/537.36

Browser/OS: Chrome Mobile 96 on Android

View result in a separate tab

Test name	Executions per second
removeChild	2584.4 Ops/sec
innerHTML	4247.5 Ops/sec
jQuery	2770.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares three approaches for clearing an HTML element:

1. `removeAllNodeChildren` (Native)
2. `purge` with jQuery (Library-based)
3. `$(document.getElementById('test').cloneNode(true)).html('')` with jQuery (Library-based)

**Options Compared**

* **Native (`removeAllNodeChildren`)**: This approach uses the native JavaScript method to clear an element's child nodes.
* **jQuery (`purge`)**: This approach uses the jQuery library's `purge` function, which is a wrapper around the `innerHTML` property. This allows for a more concise and often faster way of clearing an element's content.
* **jQuery (`$(document.getElementById('test').cloneNode(true)).html('')`)**: This approach creates a cloned version of the element using jQuery's `cloneNode` method, clears its content using `html('')`, and then discards the clone. This approach is similar to the native method but uses jQuery for convenience.

**Pros and Cons**

* **Native (`removeAllNodeChildren`)**:
	+ Pros: Typically faster, more efficient, and less memory-intensive.
	+ Cons: May not be as concise or readable, especially for complex DOM structures.
* **jQuery (`purge`)**:
	+ Pros: More concise and often faster than native methods, especially for clearing multiple elements. jQuery also provides other utility functions that can simplify DOM manipulation.
	+ Cons: Requires including the jQuery library, which may add overhead to your project's size and load time.
* **jQuery (`$(document.getElementById('test').cloneNode(true)).html('')`)**:
	+ Pros: Convenient and readable way to create a cloned element and clear its content. This approach is similar to the native method but uses jQuery for simplicity.
	+ Cons: Creates an unnecessary clone, which can lead to memory leaks or increased garbage collection overhead.

**Library: jQuery**

The `purge` function in the benchmark uses jQuery's library to provide a convenient way of clearing an element's content. The `$(document.getElementById('test').cloneNode(true)).html('')` option also relies on jQuery for its syntax and convenience.

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax that is specific to the language itself, but rather focuses on comparing different approaches to clearing an HTML element.

**Alternatives**

Other alternatives for clearing an HTML element include:

* `element.innerHTML = ''`: This approach is similar to the jQuery `purge` function but uses the native `innerHTML` property. It's a simple and efficient way to clear an element's content.
* `element.outerHTML = ''`: This approach is similar to `element.innerHTML = ''` but also resets the element's styles, CSS classes, and attributes.

Keep in mind that each of these alternatives has its own pros and cons, and the best choice depends on the specific use case and performance requirements.

Related benchmarks:

innerHTML vs. removeChild vs. jQuery.html() (version: 0)

Comparing performance of: removeChild vs innerHTML vs jQuery

Created: 3 years ago by: Guest

Jump to the latest result

removeChild

innerHTML

jQuery

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