compareTests.js

/**
 * Code which I test on twitter.com
 * Both tests were runing in Chrome 35.x dev tools
 * 
 * This test just gets all a tags from html and read their content
 * and then write it on end of document (body element)
 * 
 **/


console.time('testCreateElem');

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

for(var i = 0; i < elemA.length; i++){
  var span = document.createElement('span');
  span.textContent = elemA[i].textContent;
  body.appendChild(span);
}
console.timeEnd('testCreateElem');

// Result 36ms


//=======================================
console.time('testDocumentFragment');

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

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

// Result 7ms

//========================================
console.time('testInsertAdjacentHTML');

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

for(var i = 0; i < elemA.length; i++){
  html.push('<span>', elemA[i].textContent, '</span>');
}
body.insertAdjacentHTML('beforeend', html.join(''));
console.timeEnd('testInsertAdjacentHTML');