上一篇文章 “使用 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
的方案。