var startTimeStamp = new Date().getTime(), startTimeStamp2, duration, duration2, frag; for (var i = 0; i < 100000; i++) { document.getElementById('result').innerHTML = ''; // empty p = document.createElement('p'); t = document.createTextNode('paragraph'); p.appendChild(t); document.getElementById('result').appendChild(p); } duration = new Date().getTime() - startTimeStamp; // javascript benchmark - difference between start and end time in milliseconds document.getElementById('log').innerHTML = 'Operation with 100,000 DOM manipulation in the loop lasts ' + duration + ' milliseconds;'; startTimeStamp2 = new Date().getTime(); frag = document.createDocumentFragment(); for (var j = 0; j < 100000; j++) { document.getElementById('result2').innerHTML = ''; // empty p = document.createElement('p'); t = document.createTextNode('paragraph'); p.appendChild(t); frag.appendChild(p); } document.getElementById('result2').appendChild(frag); document.getElementById('result2').innerHTML = ''; // empty duration2 = new Date().getTime() - startTimeStamp2; // javascript benchmark - difference between start and end time in milliseconds document.getElementById('log2').innerHTML = 'Operation with DOM manipulation using offline fragment outside the loop lasts ' + duration2 + ' milliseconds;';
<p id="log">log</p> <p id="result">result</p> <p id="log2">log 2</p> <p id="result2">result 2</p>