JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

HTML

<table id='output'>
    <thead>
        <tr><th>
            data length &rarr;<br/>
            slice size &darr;
        </th></tr>
    </thead>
    <tbody>
    </tbody>  
</table>

CSS

td, th {
    text-align: right;
}

td {
    font-family: monospace;
}

JavaScript

function gen64Data(approximateLength) {
    return (new Array(0 | (approximateLength / 3))).join('ICAg');
}

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 1024;
    
    function charCodeFromCharacter(c) {
        return c.charCodeAt(0);
    }

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = Array.prototype.map.call(
            slice, charCodeFromCharacter);
        var byteArray = new Uint8Array(byteNumbers, contentType);

        byteArrays.push(byteNumbers);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

// --

var contentType = 'text/plain; charset=utf-8';

var dataLengths = [ 10000000, 5000000, 2500000, 1000000, 100000 ];
var sliceSizes = [ Infinity, 100000, 10000, 1000, 150, 140, 130, 120, 110, 100, 75, 50 ];

var headerRow = document.querySelector('#output thead tr');
for (var i = 0; i < dataLengths[i]; i++) {
    var header = document.createElement('th');
    header.textContent = dataLengths[i];
    headerRow.appendChild(header);
}

var tableBody = document.querySelector('#output tbody');
for (var i = 0; i < sliceSizes.length; i++) {
    var row = document.createElement('tr');
    tableBody.appendChild(row);
    var header = document.createElement('th');
    header.textContent = sliceSizes[i];
    row.appendChild(header);
    
    for (var j = 0; j < dataLengths.length; j++) {
        var resultCell = document.createElement('td');
        row.appendChild(resultCell);

        var b64Data = gen64Data(dataLengths[j]);
        
        var startTime = +new Date;
        b64toBlob(b64Data, contentType, partitionSizes[i]);
        var endTime = +new Date;
        
        resultCell.textContent = ((endTime - startTime) / 100) | 0;
    }
}