Run results for: JavaScript Uint8Array to Base64: FileReader vs btoa vs toBase64

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Browser: Chrome 141

Operating system: Windows

Device Platform: Desktop

Date tested: 8 months ago

Test name	Executions per second
FileReader 1K	6860.7 Ops/sec
FileReader 32K	3911.5 Ops/sec
FileReader 64K	2775.0 Ops/sec
FileReader 1M	229.6 Ops/sec
btoa 1K	103070.7 Ops/sec
btoa 32K	3280.4 Ops/sec
btoa 64K	1639.4 Ops/sec
btoa 1M	54.8 Ops/sec
toBase64 1K	6224846.0 Ops/sec
toBase64 32K	387007.5 Ops/sec
toBase64 64K	207094.4 Ops/sec
toBase64 1M	14040.0 Ops/sec

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);

Run results for: JavaScript Uint8Array to Base64: FileReader vs btoa vs toBase64

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

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