Document fragments VS appending directly

Benchmark created on

Setup

const NUM_DIVS = 12;
const NUM_BUTTONS = 12;
const NUM_TEXT = 12

Teardown

  document.body.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Document fragments
  const fragment = document.createDocumentFragment();
  
  for (let i = 0; i < NUM_DIVS; i++) {
    const div = document.createElement('div');
    
    for (let j = 0; j < NUM_BUTTONS; j++) {
      const button = document.createElement('button');
      
      for (let k = 0; k < NUM_TEXT; k++) {
        const text = document.createTextNode(`Text ${k}`);
        button.appendChild(text);
      }
      
      div.appendChild(button);
    }
    
    fragment.appendChild(div);
  }
  
  document.body.appendChild(fragment)
ready
Appending directly
  for (let i = 0; i < NUM_DIVS; i++) {
    const div = document.createElement('div');
    
    for (let j = 0; j < NUM_BUTTONS; j++) {
      const button = document.createElement('button');
      
      for (let k = 0; k < NUM_TEXT; k++) {
        const text = document.createTextNode(`Text ${k}`);
        button.appendChild(text);
      }
      
      div.appendChild(button);
    }
    
    document.body.appendChild(div);
  }
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.