Document Fragment vs appendChild

by Julien Etienne

HTML

<div id="root"></div>

JavaScript

const root = document.querySelector('#root');
const fragment = document.createDocumentFragment();
let testNumber  = 1;
const observe = (mutationList) => {
  const mutationListLength = mutationList.length;
  for (let i = 0; i < mutationListLength; i++) {
   	console.log('DOM HAS BEEN CHANGED ' + (i + 1) + ' time' + (i > 0 ? 's':''));
  }
};

// Create element 
const createList = (root, parentNode, count) => {
  const isFragment = parentNode.nodeType === 11;

  console.info(isFragment ? 'Using Fragment' : 'Directly modifiying DOM');

 console.time(`Test number ${testNumber}`);
  for (let i = 0; i < count; i++) {
    const div = document.createElement('div');
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello darkness, my old friend';
    div.appendChild(h1);
    parentNode.appendChild(div);
  }
  if(isFragment){
  root.appendChild(parentNode);
  }
   console.timeEnd(`Test number ${testNumber}`);
  testNumber++;
}

// Observe changes 
const observer = new MutationObserver(observe);
observer.observe(root, {childList: true});



//:: Updates Fragment and appends x3 times. Expect 3 mutations.
createList(root, fragment, 10000);
createList(root, fragment, 10000);
createList(root, fragment, 10000);

//:: 5 seconds pass
const delay = 2; 

//:: Appends to DOM directly.
setTimeout(()=>{
createList(null, root, 1000);
createList(null, root, 1000);
createList(null, root, 1000);
}, delay * 1000);