JavaScript 编解码 Base64 速度测评

上一篇文章 “使用 JavaScript 处理 UTF-8 文本字符串或任意数据的 Base64 编解码” 中介绍了两种进行 Base64 编解码的思路，一种是利用现有的 atob 和 btoa 函数，另一种（也）是利用（现有的）FileReader 和 Fetch API.

出于历史原因，使用 btoa 函数时，需要先将字节流转换为 JavaScript 中的字符串，该字符串中，每个字符对应的数码，为对应字节的数字表示；类似地，使用 atob 函数解码 base64 后得到的不是字节流，而是“字节字符串”。

因此，针对使用 atob 和 btoa 函数进行的 Base64 编解码，其性能方面，需要考虑的是“字节字符串”和字节流之间的转换。

字节串到 “字节字符串” 的转换

这里笔者首先使用 jsbenchmark.com 进行了字节串到字符串之间的转换测评 (链接). 主要考察了以下几种方法:

• String.fromCodePoint() 方法（.join("")、字符串拼接、字符串拼接 + Array.reduce）
• String.fromCharCode() 方法（.join("")、字符串拼接、字符串拼接 + Array.reduce）
• String.fromCodePoint.apply() （字符串拼接、字符串拼接 + Array.reduce）
• String.fromCharCode.apply() （字符串拼接、字符串拼接 + Array.reduce）
• Uint16Array + TextDecoder('utf-16')

需要注意的是，JavaScript 中的 Function.apply() 方法有数量限制；由于标准没有对此进行指定，不同的 JavaScript 引擎会有不同的实现，进而数量限制也不同。因此在使用 Function.apply() 处理大量数据时，最好事先将数据拆分为小块。

结果上来说，在笔者使用的 Chrome (V8) 和 Firefox (SpiderMonkey) 上：

• 单独调用的 fromCodePoint 略优于 fromCharCode，但在 Safari 上，后者优于前者不少；
• 单独调用时，字符串拼接要优于 join；reduce 在 Safari 上会略优于字符串拼接；
• 通过 apply 调用远优于单独调用，且 fromCodePoint 略优于 fromCharCode; 使用 reduce 拼接分块，优于字符串拼接（Safari 上 仍是 fromCharCode 略优于 fromCodePoint ，但在使用 reduce 拼接时，二者几乎持平）；
• 在 Chrome 和 Safari 上，使用 TextEncoder 远优于 apply 调用，但是在 Firefox 上却相反；

在清楚了字符串转换的效率后，便可以使用相对较优的方法，来进一步比较不同 base64 编解码方法的效率。

base64 编码

首先是 base64 编码 (链接), 主要考察了以下几种方法：

• fromCodePoint (apply + reduce) + btoa
• fromCharCode (apply + reduce) + btoa
• TextDecoder + btoa
• Blob + FileReader.readAsDataURL

总的来说，

• 在 Chrome 上，fromCodePoint 不再优于 fromCharCode；
• 在 Chrome、Firefox 和 Safari 上，TextDecoder 的方案都要优于 fromCharCode 或 fromCodePoint；
• FileReader.readAsDataURL 的方案在 Firefox 和 Safari 上都远远优于其它，但在 Chrome 上，FileReader 只是略优于 TextEncoder 的方案，并且优势并不稳定。

base64 解码

base64 解码方面主要考察了以下几种方法 (链接)：

• atob + codePointAt (Uint8Array.from)
• atob + charCodeAt (Uint8Array.from)
• atob + charCodeAt (for loop)
• DataURL + fetch

结果大概如下：

• 在 Firefox 上，charCodeAt 要优于 codePointAt，而在 Safari 和 Chrome 上，二者几乎持平；
• 使用 for-loop 的实现要远优于使用 Uint8Array.from 的；
• 在 Chrome 上，使用 fetch 的实现快于其它几种，但较 atob + for-loop 没有明显优势；
• 在 Safari 上，fetch 仍优于 Uint8Array.from 的方案，但远低于 atob + for-loop 的方法；
• 在 Firefox 上，fetch 有时甚至会慢于 Uint8Array.from 的方案。