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 页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”。

Last Updated: 5/15/2019, 5:28:34 PM