XingYun blog
  • JS基础

    • 图解js原型链
    • JS Event Loop
    • 对象的底层数据结构
    • 让你的JavaScript代码简单又高效
    • 函数参数按值传递
    • 判断数据类型
    • 浮点数精度问题和解决办法
    • 常用方法snippet
    • 实现Promise
    • 防抖和节流
    • 巧用sort排序
  • CSS && HTML

    • CSS也需要性能优化
    • class命名规范
    • em、px、rem、vh、vw 区别
    • CSS揭秘阅读笔记
  • 浏览器

    • 浏览器是如何渲染页面的
    • 重排和重绘
    • BOM浏览器对象模型
    • DOM事件
    • 浏览器存储
  • 数据结构

    • JS实现链表
    • JS实现栈与栈应用
    • JS实现常见排序
    • 哈夫曼编码
    • MD5算法
  • vue原理浅析

    • Vue虚拟dom与Diff算法
    • 前端打包文件的缓存机制
    • vue数组为什么不是响应式
    • v-for为什么不能用index做key
  • 前端工程化

    • 浏览器是如何渲染页面的
    • 前端打包需要gzip压缩吗
    • 前端打包文件的缓存机制
    • webpack loader和plugin
  • 轮子&&组件库

    • 实现水波浪进度球
  • 文字转语音mp3文件
  • 文件上传前后端实现
  • moment.js给定时间获取自然月、周的时间轴
  • 实现文件上传功能
  • 批量下载照片
  • leaflet改变坐标原点
  • 网络

    • 有了MAC地址 为什么还需要IP地址
    • 为什么IP地址老是变
    • 我们为什么需要IPV6
    • TCP与UDP
  • 计算机组成原理

    • ASCII、Unicode、UTF-8和UTF-16
  • VSCode

    • VSCode图片预览插件 Image preview
    • rsync:linux间的高效传输工具

XingYun

冲!
  • JS基础

    • 图解js原型链
    • JS Event Loop
    • 对象的底层数据结构
    • 让你的JavaScript代码简单又高效
    • 函数参数按值传递
    • 判断数据类型
    • 浮点数精度问题和解决办法
    • 常用方法snippet
    • 实现Promise
    • 防抖和节流
    • 巧用sort排序
  • CSS && HTML

    • CSS也需要性能优化
    • class命名规范
    • em、px、rem、vh、vw 区别
    • CSS揭秘阅读笔记
  • 浏览器

    • 浏览器是如何渲染页面的
    • 重排和重绘
    • BOM浏览器对象模型
    • DOM事件
    • 浏览器存储
  • 数据结构

    • JS实现链表
    • JS实现栈与栈应用
    • JS实现常见排序
    • 哈夫曼编码
    • MD5算法
  • vue原理浅析

    • Vue虚拟dom与Diff算法
    • 前端打包文件的缓存机制
    • vue数组为什么不是响应式
    • v-for为什么不能用index做key
  • 前端工程化

    • 浏览器是如何渲染页面的
    • 前端打包需要gzip压缩吗
    • 前端打包文件的缓存机制
    • webpack loader和plugin
  • 轮子&&组件库

    • 实现水波浪进度球
  • 文字转语音mp3文件
  • 文件上传前后端实现
  • moment.js给定时间获取自然月、周的时间轴
  • 实现文件上传功能
  • 批量下载照片
  • leaflet改变坐标原点
  • 网络

    • 有了MAC地址 为什么还需要IP地址
    • 为什么IP地址老是变
    • 我们为什么需要IPV6
    • TCP与UDP
  • 计算机组成原理

    • ASCII、Unicode、UTF-8和UTF-16
  • VSCode

    • VSCode图片预览插件 Image preview
    • rsync:linux间的高效传输工具
  • 有了MAC地址 为什么还需要IP地址
  • 为什么IP地址老是变
  • 我们为什么需要IPV6
  • TCP与IP协议
  • TCP与UDP
  • https与http
  • DNS域名解析
  • 进程与线程
  • SSH
  • 正向代理与反向代理
  • 程序猿必须掌握的英语单词
  • ASCII、Unicode、UTF-8和UTF-16
  • 异或门怎么连
  • 前端够用的linux命令
  • http1.1与http2
  • 与服务器保持连接的几种方式
  • base64编码
    • 关于URL
    • http请求方式
    • 图解http阅读笔记
    • 计算机
    XingYun
    2022-02-04
    目录

    base64编码

    # 一、Base64 由来

    base64 最早就是用来邮件传输协议中的,原因是邮件传输协议只支持 ascii 字符传递,因此如果要传输二进制文件,如:图片、视频是无法实现的。因此 base64 就可以用来将二进制文件内容编码为只包含 ascii 字符的内容。

    # 二、Base64 的编码原理

    首先我们需要明确一点:大多数编码都是由字符串转化成二进制的过程,而 Base64 的编码则是从二进制转换为字符串。正好是逆过程

    所以我们的步骤一般是 字符串 -->> 二进制 -->> base64

    总结一下具体转换步骤

    1. 将待转换的字符串每三个字节分为一组,每个字节占 8bit,那么共有 24 个二进制位。
    2. 将上面的 24 个二进制位每 6 个一组,共分为 4 组。
    3. 在每组前面添加两个 0,每组由 6 个变为 8 个二进制位,总共 32 个二进制位,即四个字节。
    4. 根据 Base64 编码对照表(见下图)获得对应的值。

    Base64 码表选用了"A-Z、a-z、0-9、+、/" 64 个可打印字符

    一个例子

    字节不足时怎么处理? 补 =

    一个字节:一个字节共 8 个二进制位,依旧按照规则进行分组。此时共 8 个二进制位,每 6 个一组,则第二组缺少 4 位,用 0 补齐,得到两个 Base64 编码,而后面两组没有对应数据,都用“=”补上。因此,上图中“A”转换之后为“TQ==”

    从上面的转换过程可以发现:

    1. Base64 字符表中的字符原本用 6 个 bit 就可以表示,现在前面补上 2 个 0,变为 8 个 bit,会浪费一些空间。因此,Base64 编码之后的文本,要比原文大约三分之一。
    2. 为什么使用 3 个字节一组呢?因为 6 和 8 的最小公倍数为 24,三个字节正好 24 个二进制位,每 6 个 bit 位一组,恰好能够分为 4 组。

    # 三、应用场景

    1. 电子邮件(SMTP 协议)这个不多说,就是 base64 出现的原因

    2. http 协议当中的 URL: 必须进行 URLEncode 不然出现的等号可能使解析失败 空格也会使 http 请求解析出现问题,比如 请求行就是以空格来划分的 POST /test HTTP/1.1

    3. 图片 base64 编码: 前端在实现页面时,对于一些简单图片,通常会选择将图片内容直接内嵌在页面中,避免不必要的外部资源加载,增大页面加载时间,但是图片数据是二进制数据,该怎么嵌入呢?绝大多数现代浏览器都支持一种名为 Data URLs 的特性,允许使用 Base64 对图片或其他文件的二进制数据进行编码,将其作为文本字符串嵌入网页中。

    4. 很多证书一般都是作 Base64 编码的,因为它利于传播和下载。

    上次更新: 2023/04/05, 09:41:10
    与服务器保持连接的几种方式
    关于URL

    ← 与服务器保持连接的几种方式 关于URL→

    最近更新
    01
    JavaScript-test
    07-20
    02
    二维码的原理
    07-20
    03
    利用ChatGPT优化代码
    07-20
    更多文章>
    Theme by Vdoing | Copyright © 2021-2023 XingYun | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式