跳到主要内容

Base64 的使用（前端常见场景）

面试速答（30 秒版 TL;DR）​

  • Base64 适用于“必须以文本形式携带二进制”的场景：data: URL、某些配置/JSON 传输、Authorization: Basic ... 等。
  • 不适合大文件：体积变大 + JS 字符串占内存高 + 编解码耗 CPU。
  • 浏览器里 btoa/atob 只适合 Latin1/ASCII；处理中文等 UTF-8 文本要用 TextEncoder/TextDecoder 做字节转换。

常见使用场景（面试回答按“场景 -> 方案 -> 取舍”说）​

场景常见做法关键点
CSS/HTML 内联小图片url("data:image/png;base64,...")资源小才合适；会影响缓存粒度
前端本地预览文件优先 URL.createObjectURL(file)Base64 会造成内存峰值
传输二进制到 JSON把字节数组 Base64 后再放 JSON明确体积开销与限额
HTTP Basic AuthAuthorization: Basic base64(user:pass)仍需 HTTPS，Base64 不提供安全
JWT 等 URL 传递Base64URL（- _，可去 =）避免 + / = 造成 URL 编码问题

在 CSS/HTML 里用 Base64（data: URL）​

1）CSS 背景图​

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
  background-size: contain;
  background-repeat: no-repeat;
}

要点：

  • 需要写对 MIME：data:image/png;base64, / data:image/svg+xml;base64, 等。
  • 大文件慎用：CSS 变大、解析慢、缓存失效范围扩大。

2）HTML 图片​

<img alt="avatar" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." />

浏览器里编码/解码：btoa/atob 与 UTF-8 坑​

1）btoa/atob 只适用于 ASCII/LATIN1​

如果直接对中文执行 btoa("中文")，会抛异常或得到错误结果，因为它把 JS 字符串当作单字节序列处理。

2）UTF-8 文本与 Base64 互转（推荐写法）​

export function utf8ToBase64(str: string): string {
  const bytes = new TextEncoder().encode(str);
  let bin = '';
  for (const b of bytes) bin += String.fromCharCode(b);
  return btoa(bin);
}

export function base64ToUtf8(b64: string): string {
  const bin = atob(b64);
  const bytes = Uint8Array.from(bin, (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

说明：

  • 上面是“能讲清原理且面试好背”的版本；真实工程里处理大数据要注意字符串拼接的性能与内存（可分块）。

文件 -> Base64：FileReader.readAsDataURL​

function fileToDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result));
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

面试加分点：预览大文件更推荐 URL.createObjectURL(file)，因为它不把整个文件转成字符串。

Node.js 里 Base64（常见于工具脚本/构建）​

const b64 = Buffer.from('hello', 'utf8').toString('base64');
const str = Buffer.from(b64, 'base64').toString('utf8');

典型题 & 标准答法​

Q1：为什么不建议把大图片转 Base64 内联进 CSS？​

答：Base64 会膨胀体积（约 +33%），且内联会让缓存粒度变差，CSS 改动会导致图片也一起失效；在 JS 侧转换还可能造成内存峰值与卡顿。

Q2：Base64URL 和标准 Base64 有什么区别？​

答：Base64URL 主要是为了 URL/文件名安全，把 + / 替换成 - _，并可去掉末尾的 =，避免额外的 URL 编码与歧义。

易错点/坑​

  • btoa/atob 直接处理中文：会出错，需先做 UTF-8 字节转换。
  • 把 Base64 当安全方案：它不提供加密与防篡改。
  • data: URL 体积过大：可能触发 CSP 限制、解析慢、影响首屏。

速记要点（可背诵）​

  • Base64 用在“只能放文本”的地方；大文件别转。
  • 浏览器 btoa/atob 只适合单字节字符；中文用 TextEncoder/TextDecoder。