Benchmark: Create and append/remove versus display:block/display:none (improved)

Create and append/remove versus display:block/display:none (improved) (version: 0)

By writing javascript web applications It is often common the need to show or hide elements like a div according to the user actions. Is it better to do this by creating and appending the node when it is needed or to create the node on the application start and then just display or hide it? This benchmark is a performance test of this particular use case. In this version, the createAppendDiv was isolated from operations that can be done once, so the test executes just the operations that are really essencial for the test case.

Comparing performance of: Create and append/remove vs display:block/display:none

Created: 3 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div id="container">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div4">div4</div>
</div>

Script Preparation code:

function createHideCssClass() {
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.hide { display: none; }';
  document.getElementsByTagName('head')[0].appendChild(style);
}

var container = document.getElementById('container');
var div4 = document.getElementById('div4');

function createAppendDiv() {
  var div3 = document.createElement('div');
  div3.setAttribute('id', 'div3');
  var content = document.createTextNode('div3');
  div3.appendChild(content);
  container.insertBefore(div3, div4);
}

function removeDiv() {
  var div3 = document.getElementById('div3');
  div3.remove();
}

function hideDiv() {
  var div2 = document.getElementById('div2');
  div2.classList.add('hide');
}

function showDiv() {
  var div2 = document.getElementById('div2');
  div2.classList.remove('hide');
}

createHideCssClass();
var times = 100000;

Tests:

Create and append/remove
for (var i=0; i< times; i++) { createAppendDiv(); removeDiv(); }
display:block/display:none
for (var i=0; i< times; i++) { hideDiv(); showDiv(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create and append/remove
display:block/display:none

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
Create and append/remove	10.0 Ops/sec
display:block/display:none	16.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test created using MeasureThat.net. The test aims to measure the performance of two approaches for hiding and showing elements in a web application.

**Test Cases**

There are two individual test cases:

1. **Create and append/remove**: This test case measures the performance of creating and removing an element from the DOM (Document Object Model) repeatedly.
2. **display:block/display:none**: This test case measures the performance of hiding and showing an element using CSS classes.

**Test Case 1: Create and append/remove**

In this test case, a `div` element is created and appended to the DOM repeatedly for `times` iterations (set to 100,000 in this benchmark). After each iteration, the `removeDiv` function is called to remove the `div` element from the DOM. The total execution time is measured.

**Pros and Cons of approach**

Creating and removing elements from the DOM can be an expensive operation, especially when done repeatedly. This approach has the following pros and cons:

Pros:

* Easier to implement and understand for some developers
* Allows for more control over element creation and removal

Cons:

* Can lead to slower performance due to frequent DOM manipulations
* May cause browser throttling or blocking if too many elements are created and removed quickly

**Test Case 2: display:block/display:none**

In this test case, a CSS class is defined to hide an element (`.hide`), and the `hideDiv` function adds this class to an existing element (`div2`). After that, the `showDiv` function removes the `.hide` class from the same element. The total execution time is measured.

**Pros and Cons of approach**

Using CSS classes to hide and show elements can be a more efficient way to perform these operations:

Pros:

* Can lead to faster performance compared to DOM manipulation
* Allows for more fine-grained control over CSS styles

Cons:

* May require more complex code to implement and understand
* Browser cache may impact performance if the same styles are applied multiple times

**Library Usage**

In this benchmark, a library is used to create a `style` element programmatically (`createHideCssClass` function). This approach allows for easy implementation of CSS classes without having to write separate HTML code.

**Special JS Features**

There is no explicit mention of special JavaScript features or syntax in this benchmark. However, it's worth noting that some browsers may have specific optimizations or quirks when dealing with DOM manipulation or CSS classes.

**Alternatives**

Other alternatives for hiding and showing elements include:

* Using inline styles instead of CSS classes
* Utilizing HTML attributes to control element visibility (e.g., `style="display: none"` or `style="display: block"`)
* Leveraging CSS transitions or animations to achieve similar effects

These approaches may have different trade-offs in terms of performance, code complexity, and browser compatibility.

Related benchmarks: