浏览器处理Base64数据的速度有多快?

原文:How fast can browsers process base64 data?

日期:2025年11月30

翻译:田八

来源:前端周刊

Base64是一种二进制到文本的编码方案,它使用由64个字符组成的字母表(A - Z、a - z、0 - 9、+、/),将任意二进制数据(如图像、文件或任何字节序列)转换为安全、可打印的 ASCII字符串。浏览器在 JavaScript中会用到它,用于将二进制数据直接嵌入代码或 HTML中,或者以文本形式传输二进制数据。

最近,浏览器新增了处理Base64的便捷且安全的方法,即 Uint8Array.toBase64()Uint8Array.fromBase64()。尽管涉及多个参数,但归根结底就是编码和解码这两个函数。

javascript 复制代码
const b64 = Uint8Array.toBase64(bytes);      // 字符串        
const recovered = Uint8Array.fromBase64(b64); // Uint8Array

编码时,它从输入中取出24位数据。这24位数据被分成四个6位段,每个6位值(范围在0到63之间)会被映射到 Base64字母表中的特定字符:前26个字符是大写字母 A-Z,接下来的26个是小写字母 a-z,然后是数字 0 - 9,接着是第62个字符(+)和第63个字符(/)。当输入长度不是3字节的倍数时,会使用等号(=)作为填充字符。

它们的速度能有多快呢?

假设每个 CPU周期处理3字节输入并生成4字节输出。在 4.5GHz的频率下,编码成 Base64的速度将达到 13.5GB/s。我们预期反向操作(解码)的性能会低一些。编码时,任何输入都是有效的,任何二进制数据都可以。然而,解码时,我们必须处理错误并跳过空格。

我编写了一个浏览器内的基准测试程序。你可以在自己喜欢的浏览器中尝试一下。

我决定在我的苹果M4处理器上测试一下,看看不同浏览器的表现如何。我使用 64KB的数据块进行测试。速度是针对二进制数据来测量的。

浏览器 编码速度 解码速度
Safari 17GB/s 9.4GB/s
SigmaOS 17GB/s 9.4GB/s
Chrome 19GB/s 4.6GB/s
Edge 19GB/s 4.6GB/s
Brave 19GB/s 4.6GB/s
Servo 0.34GB/s 0.40GB/s
Firefox 0.34GB/s 0.40GB/s

Safari的编码速度似乎比基于 Chromium的浏览器(ChromeEdgeBrave)稍慢,但其解码速度大约是这些浏览器的两倍。ServoFirefox的性能同样不佳,而且出现了意想不到的结果,即它们的解码速度比编码速度快。我本可以测试其他浏览器,但大多数浏览器似乎是 ChromiumWebKit的衍生版本。

作为参考,一台性能不错的笔记本电脑的磁盘读写速度可持续超过 3GB/s。一些高端笔记本电脑的磁盘速度超过 5GB/s。理论上,使用 Wi-Fi 7时,你的 Wi-Fi连接速度可能接近 5GB/s。一些互联网服务提供商可能提供类似的网络速度,尽管你的互联网连接速度可能比这慢几倍。

大多数浏览器的速度比你想象的要快得多。它们的速度比网络或磁盘速度还要快。

注意: 基于 Chromium的浏览器解码速度较慢,这似乎与 v8 JavaScript引擎有关,该引擎会先将字符串解码到一个临时缓冲区,然后再从临时缓冲区复制到最终目标位置。(参见v8/src/builtins/builtins-typed-array.cc中的BUILTIN(Uint8ArrayFromBase64)。)

注: MozillaDenis Palmeiro告诉我,Firefox即将进行的更新将加快Base64函数的性能。我在 Firefox nightly 版本中测试发现,性能提高了约 20%

相关推荐
qq_406176145 分钟前
深入浅出 Pinia:Vue3 时代的状态管理新选择
javascript·vue.js·ecmascript
wefly201728 分钟前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
C澒1 小时前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构
德育处主任Pro1 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
木斯佳1 小时前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
陈天伟教授2 小时前
人工智能应用- 预测新冠病毒传染性:04. 中国:强力措施遏制疫情
前端·人工智能·安全·xss·csrf
叫我一声阿雷吧2 小时前
JS 入门通关手册(23):JS 异步编程:回调函数与异步本质
javascript·es6·前端面试·回调函数·回调地狱·js异步编程·异步本质
zayzy2 小时前
前端八股总结
开发语言·前端·javascript
今天减肥吗2 小时前
前端面试题
开发语言·前端·javascript
Rabbit_QL2 小时前
【前端UI行话】前端 UI 术语速查表
前端·ui·状态模式