fragment_test.js

let elemA = document.getElementsByTagName('a');
let body = document.getElementsByTagName('body')[0];


console.log('[한번에 appendChild 해주는 경우 with fragment]')
console.time('testDocumentFragment');

fragment = document.createDocumentFragment();

for(var i = 0; i < elemA.length * 100; i++){
  var span = document.createElement('span');
  span.textContent = 'element1';
  fragment.appendChild(span);
}
body.appendChild(fragment);
console.timeEnd('testDocumentFragment');

// =====================================

console.log('[매번 appendChild 해주는 경우]')
console.time('testCreateElemEach');

var base = document.createElement('span');

for(var i = 0; i < elemA.length * 100; i++){
  var span = document.createElement('span');
  span.textContent = 'element2';
  base.appendChild(span);
}

body.appendChild(base);
console.timeEnd('testCreateElemEach');