前端:base64的作用

embedded/2024/11/27 20:22:56/

背景

项目中发现,img标签中写src,读取一个png图片,只有16kb,速度特别慢。

解决办法,将图片转为base64,然后读取,速度特别快17ms就解决。

定义:base64是一种基于64个可打印字符(A-Z、a-z、0-9、+、/)来表示二进制数据的表示方法,末尾用=做后缀。

Base64 的应用场景包括:

常用于在 HTTP 协议中传输二进制数据。
例如音乐文件里面保存一张封面图片,就是通过 base64 来进行保存。
就是把一张图片或文件,变成一串字符串,这样就可以直接把这个字符串保存到数据库中
这种编码通常用于在网络中传输二进制数据,如图片或文件。

base64对于前端来说并不陌生,在性能优化方面,base64经常被用于小图片的转化,从而达到减少http请求,使得页面的性能变得越来越好

  • 优点

因为它可以避免数据在不同系统间传输时被误解或破坏;
同时无需借用一个空间进行存储,然后再通过地址获取到这个图片或者文件资源。

  • 缺点
    通过base64转化后,体积会大了 1/3 。
    虽然Base64编码可以在一定程度上隐藏原始数据,但它并不提供任何加密功能。如果需要保护数据内容的安全,还需采用其他的加密技术。因为它的编码与解码过程是确定且公开的

如何转?
js中有个办法window.btoa可以直接转换成base64,window.atob转成字符串。
var encodedData = window.btoa(“Hello, world”); // SGVsbG8gV29ybGQ= var decodedData = window.atob(encodedData);

扩展

最近在开发中遇到文件上传采用Base64的方式上传,记得以前刚开始学http上传文件的时候,都是通过content-type为multipart/form-data方式直接上传二进制文件,我们知道都通过网络传输最终只能传输二进制流,所以毫无疑问他们本质上都是一样的,那么为什么还要先转成Base64呢?这两种方式有什么区别?带着这样的疑问我们一起来分析下。

本文最后再来总结对比下这两种文件上传的方式优缺点。
(1)multipart/form-data可以传输二进制流,效率较高,Base64需要编码解码,会耗费一定的性能,效率较低。
(2)Base64不受请求方式的限制,灵活度高,http文件二进制流方式传输只能通过multipart/form-data的方式,灵活度低。
因为随着机器性能的提升,小文件通过二进制流传输和字符串传输,我们对这两种方式时间延迟的感知差异并不那么明显,因此大部分情况下我们更多考虑的是灵活性,所以采用Base64编码的情况也就比较多。

作者:初心不改_1
链接:https://juejin.cn/post/7251131990438264889
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

算法原理

Base64编码要求把3个8位的字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用’=‘,因此编码后输出的文本末尾可能会出现1或2个’='。
为了保证所输出的编码位可读字符,Base64制定了一个编码表,以便进行统一转换。编码表的大小为2^6=64,这也是Base64名称的由来。(下面是Base64编码表)

作者:Morakes
链接:https://juejin.cn/post/7168809452508807182
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


http://www.ppmy.cn/embedded/140995.html

相关文章

AWS IAM 及其功能

IAM 代表身份和访问管理,可帮助控制谁可以进入云、访问 AWS 资源以及进入后可以做什么。 身份: IAM 帮助管理可以与 AWS 资源交互的身份(如用户名或服务帐户)。 访问:它决定每个身份可以在 AWS 服务上执行哪些操作&am…

2024年9月中国电子学会青少年软件编程(Python)等级考试试卷(六级)答案 + 解析

一、单选题 1、下面代码运行后出现的图像是?( ) import matplotlib.pyplot as plt import numpy as np x np.array([A, B, C, D]) y np.array([30, 25, 15, 35]) plt.bar(x, y) plt.show() A. B. C. D. 正确答案:A 答案…

【mac】终端左边太长处理,自定义显示名称(terminal路径显示特别长)

1、打开终端 2、步骤 (1)修改~/.zshrc文件 nano ~/.zshrc(2)添加或修改PS1,我是自定义了名字为“macminiPro” export PS1"macminiPro$ "(3)使用 nano: Ctrl o (字母…

如何使用 Python 开发一个简单的文本数据转换为 Excel 工具

目录 一、准备工作 二、理解文本数据格式 三、开发文本数据转换为Excel工具 读取CSV文件 将DataFrame写入Excel文件 处理其他格式的文本数据 读取纯文本文件: 读取TSV文件: 四、完整代码与工具封装 五、使用工具 六、总结 在数据分析和处理的日常工作中,我们经常…

CSS中flex:1是什么属性

flex: 1 是 CSS 中的一个简写属性,用于设置 Flex 项目的灵活伸缩比例(flex-grow)、收缩比例(flex-shrink)以及基础大小(flex-basis)。具体来说,flex: 1 实际上是以下三个属性的简写&…

深度学习基础1

目录 1. 深度学习的定义 2.神经网络 2.1. 感知神经网络 2.2 人工神经元 2.2.1 构建人工神经元 2.2.2 组成部分 2.2.3 数学表示 2.2.4 对比生物神经元 2.3 深入神经网络 2.3.1 基本结构 2.3.2 网络构建 2.3.3 全连接神经网络 3.神经网络的参数初始化 3.1 固定值初…

Sourcetree:一款强大的Git客户端

Sourcetree:一款强大的Git客户端 Sourcetree是一款由Atlassian开发的免费Git客户端,它提供了一个直观的图形界面,让用户能够轻松地管理他们的版本控制系统。无论是初学者还是有经验的开发者,Sourcetree都能提供方便快捷的Git操作…

Python 爬虫 (1)基础 | 基础操作

一、基础操作 1、快速构建一个爬虫 ConvertCurl: https://curlconverter.com/选择URL,点击右键,选择 Copy >> Copy as cURL(bash) 2、配置nodejs开发环境 参考WIKI:https://www.jb51.net/python/307069k7q.htm国内npm源…