JSFiddle - React, Tailwind, and code Playground

by bjoerne

HTML

<h1>Parameters</h1>
<table>
    <tr>
        <td><label for="num-of-proxies">Number of proxies</label></td>
        <td><input type="text" name="num-of-proxies" value="100" checked="checked" /></td>
    </tr>
    <tr>
        <td><label for="num-of-invokations">Number of invokations</label></td>
        <td><input type="radio" name="num-of-invokations" value="1000" /></td>
    </tr>
    <tr>
        <td><label for="num-of-invokations">Duration (millies)</label></td>
        <td><input type="radio" name="duration" value="1000" /></td>
    </tr>
</table>
<a id="run" href="#">Run!</a>
<h1>Results</h1>
<div id="result"><div>

CSS

#result table {
    border-collapse: collapse;
}
#result td {
    border: 1px #CCC solid;
    padding: 5px;
}

JavaScript

$('#run').on('click', run);
run();

function run() {
    var numberOfProxies = $('input[name=num-of-proxies]').val();
    var numberOfInvokations = $('input[name=num-of-invokations]').val();
    var duration = $('input[name=duration]').val();
    var results = [];
    appendResults(results, maxCount)
    printResults(results);
}

function appendResults(results, maxCount) {
    appendResultsForCallback(results, maxCount, "Build small html fragment", buildSmallHtmlFragment);
    appendResultsForCallback(results, maxCount, "Build big html fragment", buildBigHtmlFragment);
}

function appendResultsForCallback(results, maxCount, callbackName, callback) {
    appendResult(results, callbackName, 'One anonymous function', oneAnonymousFunction(maxCount, callback));
    appendResult(results, callbackName, 'One proxy', oneProxy(maxCount, callback));
    appendResult(results, callbackName, 'Multiple anonymous functions', multipleAnonymousFunctions(maxCount, callback));
    //appendResult(results, callbackName, 'Multiple proxies', multipleProxies(maxCount, callback));
}

function appendResult(results, callbackName, type, result) {
    results.push([callbackName, type, result]);
}

function buildSmallHtmlFragment() {
    buildHtmlFragment(50);
}
function buildBigHtmlFragment() {
    buildHtmlFragment(10000);
}
function buildHtmlFragment(numOfItems) {
    var string = "<ul>";
    for (var i = 0; i < numOfItems; i++) {
        string += "<li>x</li>";
    }
    string += "</ul>";
}

function calculateSqrt() {
    current = 99.0;
    for (var i = 0; i < 10000; i++) {
        current = Math.sqrt(current);
        current = current * current;
    }
}

function oneAnonymousFunction(maxCount, callback) {
    var start = new Date().getTime();
    var i=0;
    var increment = function() {
        i++;
    }
    while (i < maxCount) {
        increment();
        if (null != callback) callback.call(window, i);
    }
    return new Date().getTime() - start;
}

function oneProxy(maxCount,...