# Base64 编码

最近在一次 coding 过程中,发现了有三张图片是使用的 base64 进行编码,最后导致我的 json 数据达到了 6M 大小,之前没有认真了解过 base64,这里就学习一拨 base64。

# 什么是 base64?

简单来说,就是使用一串字符串的编码来代替图片的地址。

是不是够简单,那为啥我们要这么做呢?总所周知,我们在网页上看到的每一张图片都是要去请求的,都需要 http。当我们使用 base64 后,也会去发起请求,但是不会向服务器发请求,而是随着 HTML 的下载同时被下载到了本地。

那为什么我们要使用 base64 呢?毕竟我们可以少发一次请求,这节约了资源。但 base64 编码出来的文件会比源文件大,所以我们使用 base64 还是有场景的。

那么 base64 有哪些优缺点呢?

# 优点

  1. 无需额外请求
  2. 可以像图片一样单独使用
  3. 没有跨域问题

# 缺点

  1. Base64 虽然能减少请求,但是会增大体积,阻塞 CRP
  2. 页面解析 CSS 生成 CSSOM 时间增加

ps:

CRP(Critical Rendering Path,关键渲染路径):当浏览器从服务器接收到一个 HTML 页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”。