Benchmark: Create and append/remove versus display:block/display:none (improved) (without-recreating) (without-x-times)

Create and append/remove versus display:block/display:none (improved) (without-recreating) (without-x-times) (version: 0) Benchmark.js

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: 2 years ago by: Guest

Go 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');

var div3 = document.createElement('div');
div3.setAttribute('id', 'div3');
var content = document.createTextNode('div3');
div3.appendChild(content);

function createAppendDiv() {
  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 = 1;

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

display:block/display:none

1.6M/s

Create and append/remove

714K/s

View exact numbers

Test name	Executions per second
✓ display:block/display:none	1,572,604 Ops/sec
Create and append/remove	713,760 Ops/sec