JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,user-scalable=no">
<title>JavaScript loop speed test</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
html, body { font-family: sans-serif; }
table td { padding: 0.5em }
</style>
<script>
window.onload = function () {
for (var i=0, elm; i<100000; i++) {
elm = document.createElement("div");
elm.innerHTML = "Hej";
elm.style.display = "none";
document.body.appendChild(elm);
}
document.getElementById("start-test").onclick = startTest;
};
function startTest() {
var divs = document.getElementsByTagName("div");
var time1 = new Date().getTime();
for (var i=0; i<divs.length; i++) { }
document.getElementById("time-1").innerHTML = new Date().getTime() - time1 + ' ms';
var time2 = new Date().getTime();
for (var i=0; divs[i]; i++) { }
document.getElementById("time-2").innerHTML = new Date().getTime() - time2 + ' ms';
var time3 = new Date().getTime();
for (var i=0, il=divs.length; i<il; i++) { }
document.getElementById("time-3").innerHTML = new Date().getTime() - time3 + ' ms';
var time4 = new Date().getTime();
for (var i in divs) { }
document.getElementById("time-4").innerHTML = new Date().getTime() - time4 + ' ms';
var time5 = new Date().getTime();
var il=divs.length; while(il--) { }
document.getElementById("time-5").innerHTML = new Date().getTime() - time5 + ' ms';
var time6 = new Date().getTime();
var i=0; while(i<divs.length) { i++; }
...