Benchmark: JavaScript Uint8Array to Base64: FileReader vs btoa vs toBase64

JavaScript Uint8Array to Base64: FileReader vs btoa vs toBase64 (version: 6)

toBase64 is usually the fastest, but may not be supported by older browsers.

Comparing performance of: FileReader 1K vs FileReader 32K vs FileReader 64K vs FileReader 1M vs btoa 1K vs btoa 32K vs btoa 64K vs btoa 1M vs toBase64 1K vs toBase64 32K vs toBase64 64K vs toBase64 1M vs Self 1K vs Self 32K vs Self 64K vs Self 1M

Created: 6 months ago by: Registered User

Jump to the latest result

Script Preparation code:

function bytesToBase64ByFileReader(bytes) {
    return new Promise(r => {
        const reader = new FileReader()
        reader.onload = () => r(reader.result)
        reader.readAsDataURL(new Blob([bytes]))
    }).then(url => url.slice(url.indexOf(",") + 1));
}

function bytesToBase64ByBtoa(bytes) {
    return btoa(bytes.reduce((data, byte) => data + String.fromCharCode(byte), ""));
}

function bytesToBase64ByToBase64(bytes) {
    return bytes.toBase64();
}

function bytesToBase64BySelf(bytes) {
    const dict = [
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
        "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
        "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "/"
    ];
    let base64 = "";
    let i;
    for (i = 0; i < bytes.length - 3; i += 3) {
        const byte1 = bytes[i];
        const byte2 = bytes[i + 1];
        const byte3 = bytes[i + 2];
        base64 += dict[byte1 >>> 2] + dict[(byte1 & 3) << 4 | byte2 >>> 4] + dict[(byte2 & 15) << 2 | byte3 >>> 6] + dict[byte3 & 63];
    }
    const has2 = i + 1 < bytes.length;
    const byte1 = bytes[i];
    const byte2 = has2 ? bytes[i + 1] : 0;
    base64 += dict[byte1 >>> 2] + dict[(byte1 & 3) << 4 | byte2 >>> 4];
    if (has2) {
        const has3 = i + 2 < bytes.length;
        const byte3 = has3 ? bytes[i + 2] : 0;
        return base64 + dict[(byte2 & 15) << 2 | byte3 >>> 6] + (has3 ? dict[byte3 & 63] : "=");
    }
    return base64 + "==";
}

const bytes1K = new Uint8Array(1024);
const bytes32K = new Uint8Array(32768);
const bytes64K = new Uint8Array(65536);
const bytes1M = new Uint8Array(1048576);
for (const bytes of [bytes1K, bytes32K, bytes64K, bytes1M])
    for (let i = 0; i < bytes.length; i += 65536)
        crypto.getRandomValues(bytes.subarray(i, i + 65536));

Tests:

FileReader 1K [Async/Deferred]
await bytesToBase64ByFileReader(bytes1K); deferred.resolve();
FileReader 32K [Async/Deferred]
await bytesToBase64ByFileReader(bytes32K); deferred.resolve();
FileReader 64K [Async/Deferred]
await bytesToBase64ByFileReader(bytes64K); deferred.resolve();
FileReader 1M [Async/Deferred]
await bytesToBase64ByFileReader(bytes1M); deferred.resolve();
btoa 1K
bytesToBase64ByBtoa(bytes1K);
btoa 32K
bytesToBase64ByBtoa(bytes32K);
btoa 64K
bytesToBase64ByBtoa(bytes64K);
btoa 1M
bytesToBase64ByBtoa(bytes1M);
toBase64 1K
bytesToBase64ByToBase64(bytes1K);
toBase64 32K
bytesToBase64ByToBase64(bytes32K);
toBase64 64K
bytesToBase64ByToBase64(bytes64K);
toBase64 1M
bytesToBase64ByToBase64(bytes1M);
Self 1K
bytesToBase64BySelf(bytes1K);
Self 32K
bytesToBase64BySelf(bytes32K);
Self 64K
bytesToBase64BySelf(bytes64K);
Self 1M
bytesToBase64BySelf(bytes1M);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
FileReader 1K
FileReader 32K
FileReader 64K
FileReader 1M
btoa 1K
btoa 32K
btoa 64K
btoa 1M
toBase64 1K
toBase64 32K
toBase64 64K
toBase64 1M
Self 1K
Self 32K
Self 64K
Self 1M

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Test name	Executions per second
FileReader 1K	96004.9 Ops/sec
FileReader 32K	21268.3 Ops/sec
FileReader 64K	9068.8 Ops/sec
FileReader 1M	891.3 Ops/sec
btoa 1K	130923.4 Ops/sec
btoa 32K	4069.1 Ops/sec
btoa 64K	2028.0 Ops/sec
btoa 1M	64.0 Ops/sec
toBase64 1K	1315468.6 Ops/sec
toBase64 32K	46671.7 Ops/sec
toBase64 64K	18247.3 Ops/sec
toBase64 1M	1146.8 Ops/sec
Self 1K	253447.2 Ops/sec
Self 32K	7691.9 Ops/sec
Self 64K	3738.6 Ops/sec
Self 1M	59.2 Ops/sec

Related benchmarks:

JavaScript Uint8Array to Base64: FileReader vs btoa vs toBase64 (version: 6)

toBase64 is usually the fastest, but may not be supported by older browsers.

Comparing performance of: FileReader 1K vs FileReader 32K vs FileReader 64K vs FileReader 1M vs btoa 1K vs btoa 32K vs btoa 64K vs btoa 1M vs toBase64 1K vs toBase64 32K vs toBase64 64K vs toBase64 1M vs Self 1K vs Self 32K vs Self 64K vs Self 1M

Created: 6 months ago by: Registered User

Jump to the latest result

FileReader 1K [Async/Deferred]

FileReader 32K [Async/Deferred]

FileReader 64K [Async/Deferred]

FileReader 1M [Async/Deferred]

btoa 1K

btoa 32K

btoa 64K

btoa 1M

toBase64 1K

toBase64 32K

toBase64 64K

toBase64 1M

Self 1K

Self 32K

Self 64K

Self 1M

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A