Benchmark: Create and append/remove versus display:block/display:none

Create and append/remove versus display:block/display:none (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.

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);
}

function createAppendDiv() {
  var container = document.getElementById('container');
  var div3 = document.createElement('div');
  div3.setAttribute('id', 'div3');
  var content = document.createTextNode('div3');
  div3.appendChild(content);
  var div4 = document.getElementById('div4');
  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 years ago)

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

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
Create and append/remove	1.5 Ops/sec
display:block/display:none	5.3 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.

**Benchmark Overview**

The provided benchmark compares two approaches to show or hide HTML elements: creating and appending vs displaying with CSS classes.

**Options Compared**

There are two test cases:

1. **Create and append**: The script creates a new `div` element, appends it to the DOM, removes it after a certain number of iterations (`times`).
2. **Display:block/display:none**: The script uses CSS classes to hide and show an existing `div` element.

**Pros and Cons**

1. **Create and append:**
	* Pros:
		+ More control over the DOM structure.
		+ Can be more efficient for dynamic content updates.
	* Cons:
		+ Requires more memory allocation and garbage collection.
		+ Can be slower due to frequent element creation and removal.
2. **Display:block/display:none**:
	* Pros:
		+ Faster, as it uses CSS classes that don't require DOM manipulation.
		+ More efficient in terms of memory usage.
	* Cons:
		+ Less control over the DOM structure.
		+ May not be suitable for dynamic content updates.

**Library: CSSOM (CSS Object Model)**

The `display:block/display:none` test case uses CSS classes to hide and show an element. The `style` element is created and appended to the head of the document, which defines a CSS rule that applies to the `#div2` element when the `hide` class is applied. When the `show` class is applied, the element's display property is set to `block`.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in this benchmark.

**Other Alternatives**

For alternative approaches to show or hide elements, you can consider:

1. Using a templating engine like Handlebars or Mustache.
2. Employing a library like jQuery for DOM manipulation and event handling.
3. Utilizing CSS transitions or animations for smoother element transitions.

By understanding the pros and cons of each approach, developers can choose the best method for their specific use case and optimize their code for better performance.

Related benchmarks: