JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<p id="log">log</p>
<p id="result">result</p>
<p id="log2">log 2</p>
<p id="result2">result 2</p>

JavaScript

var startTimeStamp = new Date().getTime(),
    startTimeStamp2,
    duration, duration2, content;

for (var i = 0; i < 100000; i++) {
    document.getElementById('result').innerHTML = i;
}

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();
for (var j = 0; j < 100000; j++) {
    content = j;
}
document.getElementById('result2').innerHTML = content;

duration2 = new Date().getTime() - startTimeStamp2; // javascript benchmark - difference between start and end time in milliseconds
document.getElementById('log2').innerHTML = 'Operation with DOM manipulation outside the loop lasts ' + duration2 + ' milliseconds;';