JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<h1>How many times faster is for-loop over filter?</h1>

<table id="tab">
    <tr>
        <th>Num Elements</th>
        <th>20% Match</th>
        <th>40% Match</th>
        <th>60% Match</th>
        <th>80% Match</th>
        <th>100% Match</th>
    </tr>
</table>

<button id="go">Go!</button>

CSS

th { padding: 10px;}

JavaScript

function random(n) {
    return Math.ceil(Math.random() * n);
}

function bench(l, mod) {
    var x = [];

    for (var i = 0; i < l; i++) {
        x.push({
            id: i,
            text: random(l)
        });
    }

    var start = performance.now();
    var y = [];
    for (var i = 0; i < x.length; i++) {
        if ((x[i].id % mod) === 0) {
            y.push(x[i]);
        }
    }
    var forTime = performance.now() - start;

    start = performance.now();
    var z = x.filter(function (n) {
        return (n.id % mod) === 0;
    });
    var filterTime = performance.now() - start;
    return filterTime / forTime;
}

function noop () { console.log('noop!'); }

function makeRow (n) {
    var row = document.createElement('tr');
    var rowHeader = document.createElement('th');
    rowHeader.textContent = n;
    row.appendChild(rowHeader);
    return row;
}

function makeColumn (n) {
    var column = document.createElement('td');
    column.textContent = n.toFixed(2);
    return column;
}

function generateColumns (row, numElements, fillPercent, fillPercentStep, next) {
    if (fillPercent <= 1) {
        var fillMod = Math.floor(numElements * (1 - fillPercent)) + 1;
        row.appendChild(makeColumn(bench(numElements, fillMod)));

        setTimeout(generateColumns, 500, row, numElements, fillPercent + fillPercentStep, fillPercentStep, next);
    } else {
        setTimeout(next, 1000);
    }
}

function generateRow (table, maxElements, numElements) {
    var row = makeRow(numElements);
    table.appendChild(row);

    if (numElements < maxElements) {
        var doNext = generateRow.bind(null, table, maxElements, numElements * 10);
    } else {
        var doNext = noop;
    }
    
    generateColumns(row, numElements, 0.2, 0.2, doNext);
}

function generateTable () {
    var table = document.getElementById('tab');
    generateRow(table, 100000000, 100000);
}

document.getElementById('go').addEventListener('click', generateTable);