Benchmark: remove vs add class display none on each element

HTML Preparation code:

<style type="text/css">
        .hide {
            display: none;
        }
</style>
<div id="container"></div>

Script Preparation code:

var container = document.getElementById('container');
ul = document.createElement('ul');
var html = [];
    for ( var i=0; i<2000; i += 1 ) {
  	html.push(`<li>${i}</li>`);
}
 ul.innerHTML = html.join('');
 container.appendChild(ul);

Tests:

removeChild
var element = ul.firstElementChild; while (element) { var element = ul.firstElementChild; element && ul.removeChild(element); }
display:none on each element
var elements = Array.prototype.slice.call(container); for (var i = 0; i < elements.length; i++) { elements[i].classList.add("hide"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
removeChild
display:none on each element

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.

Let's break down the provided JSON and explain what is being tested.

**Benchmark Definition**

The benchmark is designed to measure the performance difference between two approaches:

1. **removeChild**: This approach uses the `ul.firstElementChild` property to remove elements from the list one by one. The code repeatedly assigns the same value to `element`, causing an infinite loop.
2. **display:none on each element**: This approach adds the "hide" class to each element using `classList.add("hide")`.

**Options Compared**

The two options are being compared in terms of their performance impact.

**Pros and Cons of Each Approach:**

1. **removeChild**:
	* Pros:
		+ Simple and straightforward implementation.
		+ Only accesses the DOM once, making it efficient.
	* Cons:
		+ Causes an infinite loop due to the repeated assignment of `element`.
		+ May not be suitable for large datasets or performance-critical applications.
2. **display:none on each element**:
	* Pros:
		+ Does not cause an infinite loop and is more predictable.
		+ Can be used with larger datasets without performance issues.
	* Cons:
		+ Requires adding an extra class to each element, which can have overhead.

**Library Used:**

In the **display:none on each element** test case, `Array.prototype.slice.call(container)` is used to convert the container's children array-like object into a true array. This allows for more efficient iteration and manipulation of the elements using modern JavaScript features like `classList.add`.

**Special JS Feature/Syntax:**

None mentioned.

**Other Considerations:**

* The benchmark uses a desktop browser (Chrome 98) with Windows 10 operating system.
* The test case is designed to measure performance in a controlled environment, eliminating external factors that might affect the results.

**Alternatives:**

If you want to explore other approaches or variations of this benchmark:

1. Use different browsers or devices to see how the results change.
2. Increase the dataset size (e.g., 5000 or 10000 elements) to test performance with larger datasets.
3. Experiment with different class names, selectors, or DOM manipulation techniques.
4. Add additional complexity, such as animations or event listeners, to test performance in more realistic scenarios.

Keep in mind that modifying the benchmark can affect its accuracy and relevance.

Related benchmarks:

remove vs add class display none on each element (version: 0)

Comparing performance of: removeChild vs display:none on each element

Created: 4 years ago by: Guest

Jump to the latest result

removeChild

display:none on each element

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