JSFiddle - React, Tailwind, and code Playground
HTML
<script>
function singleVar() {
var one,
two,
three,
four,
five,
six,
seven,
eight,
nine,
ten;
}
function multiVars() {
var one;
var two;
var three;
var four;
var five;
var six;
var seven;
var eight;
var nine;
var ten;
}
function millionInvocations() {
var singleVarTime = 0,
multiVarsTime = 0,
singleVarStart,
multiVarsStart;
for (var i=0, n=100000; i++<n;) {
singleVarStart = (new Date()).getTime();
singleVar();
singleVarTime += (new Date()).getTime() - singleVarStart;
multiVarsStart = (new Date()).getTime();
multiVars();
multiVarsTime += (new Date()).getTime() - singleVarStart;
}
return {
singleVar: singleVarTime,
multiVars: multiVarsTime
};
}
function reportMillionInvocations(numInvoke) {
var resultsDiv = document.getElementById('results'),
time,
divHtml = '<table border="1"><tr><th>Single Var</th><th>Multi Vars</th></tr>';
document.getElementById('navUserAgent').innerHTML = (navigator.userAgent);
for (var i=0; i++<numInvoke;) {
time = millionInvocations();
divHtml += ['<tr><td>', time.singleVar, '</td><td>', time.multiVars, '</td></tr>'].join('');
}
resultsDiv.innerHTML = divHtml + '</table>';
}
</script>
</head>
<body onload="reportMillionInvocations(10)">
<div id="navUserAgent"></div>
<div>Milliseconds Per Million Invocations:</div>
<div id="results"></div>