JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="left">
        Eval tests:
        <ul id="eval">
        </ul>
    </div>
    <div id="center">
        Func tests:
        <ul id="func">
        </ul>
    </div>
    <div id="right">
        Load tests:
        <ul id="load">
        </ul>
    </div>
</div>

CSS

#left {
    float: left;
    width: 33%;
}
#center {
    float: right;
    width: 33%;
}
#right {
    float: right;
    width: 33%;
}

JavaScript

var number = 1000,
    f = "document.getElementById('func').innerHTML += '<li>test</li>'",
    e = "document.getElementById('eval').innerHTML += '<li>test</li>'",
    l = "document.getElementById('load').innerHTML += '<li>test</li>'"; //same length

var startFn = new Date();
for (var i = 0; i < number; i++) (new Function(f))();
var endFn = new Date(),
    startEval = new Date();
for (var j = 0; j < number; j++) eval(e);
var endEval = new Date(),
    startDom = new Date();
for (var k = 0; k < number; k++) {
    var e = document.createElement('script');
    e.innerHTML = l;
    document.body.appendChild(e);
}
var endDom = new Date();
alert("Number of iterations: " + number);
alert("new Function(): " + (endFn - startFn));
alert("eval(): " + (endEval - startEval));
alert("DOM: " + (endDom - startDom));