前端:base64的作用

背景

项目中发现,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.mzph.cn/pingmian/61939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Excel】拆分多个sheet,为单一表格

Private Sub 分拆工作表() Application.ScreenUpdating True 让屏幕显示操作过程, Dim sht As Worksheet Dim MyBook As Workbook Set MyBook ActiveWorkbook For Each sht In MyBook.Sheets If sht.Visible True Then 隐藏的sheet跳过,否则会报1004无…

.net 支持跨平台(桌面)系列技术汇总

1. 首先微软老大哥的.net core 。 .NET Core 是微软开发的一个跨平台、高性能的开源框架,用于构建云和互联网连接的新型应用。 它允许开发者在 Windows、macOS 和 Linux 上使用喜爱的开发工具进行开发,并支持部署到云或本地环境。 .NET Core 是对 .NET …

Reactor 模式的理论与实践

1. 引言 1.1 什么是 Reactor 模式? Reactor 模式是一种用于处理高性能 I/O 的设计模式,专注于通过非阻塞 I/O 和事件驱动机制实现高并发性能。它的核心思想是将 I/O 操作的事件分离出来,通过事件分发器(Reactor)将事…

【Android+多线程】IntentService 知识总结:应用场景 / 使用步骤 / 源码分析

定义 IntentService 是 Android中的一个封装类,继承自四大组件之一的Service 功能 处理异步请求 & 实现多线程 应用场景 线程任务 需 按顺序、在后台执行 最常见的场景:离线下载不符合多个数据同时请求的场景:所有的任务都在同一个T…

openssl创建自签名证书

原文地址:自签名证书 – 无敌牛 欢迎参观我的个人博客:无敌牛 – 技术/著作/典籍/分享等 1 生成私钥 openssl genrsa -out server.key 2048 2 创建证书请求文件 openssl req -new -key server.key -out server.csr 3 用私钥和证书请求文件&#xf…

Easy Excel 通过【自定义批注拦截器】实现导出的【批注】功能

目录 Easy Excel 通过 【自定义批注拦截器】实现导出的【批注】功能需求原型:相关数据:要导出的对象字段postman 格式导出对象VO 自定义批注拦截器业务代码: 拦截器代码解释:详细解释:格式优化: Easy Excel…

python VS c++

一、语法特点 Python: 语法简洁、优雅,代码可读性极强,采用缩进来表示代码块,摒弃了像 C 那样使用大括号的传统方式,使得代码看上去十分清晰简洁。例如: ​ if 5 > 3:print("5大于3") elif 5 …

Spring Boot 的 WebClient 实践教程

什么是 WebClient? 在 Spring Boot 中,WebClient 是 Spring WebFlux 提供的一个非阻塞、响应式的 HTTP 客户端,用于与 RESTful 服务或其他 HTTP 服务交互。相比于传统的 RestTemplate,WebClient 更加现代化,具有异步和…

QML学习 —— 29、3种不同使用动画的方式(附源码)

效果 说明 第一种:属性动画 - 当启动软件时候自动执行动画。      第二种:行为动画 - 当属性发生变化则自动执行动画。      第三种:目标动画 - 将动画变为对象,指定对象的目标进行执行动画。 代码 import QtQuick 2.12 import QtQuick.Window 2.12 import QtQu…

Zustand:一个轻量级的React状态管理库

文章目录 前言一、安装Zustand二、使用Zustand三、实际案例结语 前言 在现代Web开发中,状态管理是一个常见的需求,特别是在构建大型或复杂的单页面应用程序(SPA)时。React等框架虽然提供了基本的状态管理功能,但对于复…

Redis缓存穿透及常见的解决方案

一.什么是缓存穿透? 缓存穿透是指当客户端请求的数据在缓存(如 Redis)中不存在,并且在数据库中也不存在时,直接绕过缓存去请求数据库。这种情况会导致: 缓存系统无法发挥作用,数据每次都会直接…

(原创)Android Studio新老界面UI切换及老版本下载地址

前言 这两天下载了一个新版的Android Studio,发现整个界面都发生了很大改动: 新的界面的一些设置可参考一些博客: Android Studio新版UI常用设置 但是对于一些急着开发的小伙伴来说,没有时间去适应,那么怎么办呢&am…

windows下安装wsl的ubuntu,同时配置深度学习环境

写在前面,本次文章只是个人学习记录,不具备教程的作用。个别信息是网上的,我会标注,个人是gpt生成的 安装wsl 直接看这个就行;可以不用备份软件源。 https://blog.csdn.net/weixin_44301630/article/details/1223900…

Node.js的http模块:创建HTTP服务器、客户端示例

新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战(第2版)(Web前端技术丛书)》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 要使用http模块,只需要在文件中通过require(http)引入即可。…

AI赋能电商:构建高效、智能化的新零售生态

随着人工智能(AI)技术的不断进步,其在电商领域的应用日益广泛,从购物推荐到供应链管理,再到商品定价,AI正在全面改变传统电商的运营模式,并推动行业向智能化和精细化方向发展。本文将探讨如何利…

算法之区间和题目讲解

题干 难度:简单 题目分析 题目要求算出每个指定区间内元素的总和。 然而,区间在输入的最下面,所以按照暴力破解的思路,我们首先要遍历数组,把它的值都存进去。 然后,遍历下面的区间,从索引a…

多维数组与特殊矩阵:存储与压缩

多维数组与特殊矩阵:存储与压缩 一、多维数组的存储 (一)基本概念 多维数组是线性表的推广,例如二维数组可以看作是元素为一维数组的线性表,三维数组可以看作是元素为二维数组的线性表,以此类推。在内存…

openssl颁发包含主题替代名的证书–SAN

原文地址:openssl颁发包含主题替代名的证书–SAN – 无敌牛 欢迎参观我的个人博客:无敌牛 – 技术/著作/典籍/分享等 在 X.509 证书中,commonName(CN)字段只能有一个值。如果让证书支持多个域名和IP地址,…

从尾到头打印链表 剑指offer

题目描述 输入一个链表的头节点,从尾到头反过来打印出每个节点的值。 链表节点定义如下: struct ListNode {int m_nKey;ListNode*m_pNext; }; 代码实现 栈实现: 递归实现: 但是用递归实现可能存在的问题:

安装 Docker(使用国内源)

一、安装Docker-ce 1、下载阿里云的repo源 [rootlocalhost ~]# yum install yum-utils -y && yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo && yum makecache # 尝试列出 docker-ce 的版本 [rootlocalh…