方法1, 標準実装

ライブラリを使わず、これらのブラウザ標準実装を組み合わせて変換します。

TextEncoder/TextDecoderは、文字列とUint8Arrayを相互変換してくれるAPIです。
そしてatob/btoaは、お馴染みBase64のブラウザ標準実装です。

この2つを組み合わせることにより、以下の流れでバイナリとBase64を変換できます。

Uint8Array <=> BinaryString <=> Base64

BinaryStringとは0x00~0xFFまでの文字(制御文字含)で構成される文字列です。

バイナリを型付き配列やBlobとして扱うのが難しい時によく用いられる表現です。

そしてatob/btoaは、ちょうど0x00~0xFFまでの文字を扱えます。
逆にこれしか扱えないので、Unicodeを扱う際によく問題となりますが...

TextEncoder/TextDecoder APIはクラスとして提供されるので、Base64向けの拡張クラスを作ってみました。

// Base64 => Uint8Array
class Base64Encoder extends TextEncoder{
    constructor(){
        super();
    }

    encode(text){
        return super.encode(atob(text));
    }
}

// Uint8Array => Base64
class Base64Decoder extends TextDecoder{
    constructor(){
        super();
    }

    decode(buffer){
        return btoa(super.decode(buffer));
    }
}

Node.jsはどうするんだって...?
最近話題のDenoさんが何とかしてくれるでしょう...知らんけど。

方法2, base64-js

base64-js -npm

週間14,700,000ダウンロードの実績があるライブラリです。
恐らくこれが1番メジャーでしょうか。

メソッドは3つのみ、シンプルで使いやすいです。

Base64とUint8Arrayを相互変換できます。

方法3, js-base64

js-base64 -npm

週間6,150,000ダウンロードの実績があるライブラリです。
2番手といったところでしょうか。

base64-jsと比べてライブラリ容量は大きめですが、メンテナンスは割と最近までされているようです。

こちらも、Base64とUint8Arrayを相互変換できます。

測定

以下のPCで測定を行いました。

CORE2Quad Q9550
DDR2-1066 4GB
Windows7 32bit
Google Chrome 83

部屋に転がってたPCなので、マシンスペックについては目を瞑ってもらいましょう...

元となるデータは、小さいと一瞬で終わってしまい比較にならないと予想したので、64MBのバイト配列でエンコード/デコードを行います。
これだけ大きいと、コールスタックやヒープなどのメモリ性能もついでに見れるかと思います。

// 64MB
const test = new Uint8Array(1024 * 1024 * 64);

// 1. 標準実装
new Base64Encoder().encode(new Base64Decoder().decode(test));

// 2. base64-js
base64js.toByteArray(base64js.fromByteArray(test));

// 3. js-base64
Base64.toUint8Array(Base64.fromUint8Array(test));

結果

標準実装 ... 1240 ms
base64-js ... 2870 ms
js-base64 ... ぴえん🥺(5秒程の後にスタックオーバーフロー)

という結果になりました。

まじかよ！
ライブラリ使うより普通に標準実装を組み合わせた方が速いじゃん！

js-base64に至っては完走すら出来ませんでした。

ブラウザでBase64を扱うなら、標準実装もしくはbase64-jsを使うのが良さそうです。

【JavaScript】Base64変換ライブラリで速度対決

方法1, 標準実装

方法2, base64-js

方法3, js-base64

測定

結果