Run results for: Create and append/remove versus display:block/display:none

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.

Run details:

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: Chrome 92

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

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

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(); }