前端: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.rhkb.cn/news/479231.html

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

相关文章

101.【C语言】数据结构之二叉树的堆实现(顺序结构) 2

目录 1.堆删除函数HeapPop 一个常见的错误想法:挪动删除 正确方法 设计堆顶删除函数HeapPop 解析向下调整函数AdjustDown 核心思想 向下调整最多次数 向下调整的前提 代码实现 提问 细节分析 2.测试堆删除函数 运行结果 3.引申问题 运行结果 4.练习 分析 代码…

【机器学习chp8】统计学习理论

前言 本文遗留问题:无 目录 前言 一、结构风险最小化 1、最小化风险决策 2、分类与回归中的最小化风险决策 3、统计学习的基本目标 4、无免费午餐定理 5、Hoeffding不等式 (1)背景及定义 (2)Hoeffding不等式…

Springboot启动报错’javax.management.MBeanServer’ that could not be found.

报错信息如下图: 解决办法: 1.在你的.yml文件或者.properties文件里加上如下配置: properties: management.endpoints.jmx.enabledfalseyml: management:endpoints:jmx:enabled: false2.如果以上方法行不通,在springboot启动类…

英语知识网站:Spring Boot技术构建

6系统测试 6.1概念和意义 测试的定义:程序测试是为了发现错误而执行程序的过程。测试(Testing)的任务与目的可以描述为: 目的:发现程序的错误; 任务:通过在计算机上执行程序,暴露程序中潜在的错误。 另一个…

英伟达推出了全新的小型语言模型家族——Hymba 1.5B

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

spring boot2.7集成OpenFeign 3.1.7

1.Feign Feign是一个声明式web服务客户端。它使编写web服务客户端更容易。要使用Feign,请创建一个接口并对其进行注释。它具有可插入注释支持,包括Feign注释和JAX-RS注释。Feign还支持可插拔编码器和解码器。Spring Cloud增加了对Spring MVC注释的支持&…

Jmeter中的前置处理器

5)前置处理器 1--JSR223 PreProcessor 功能特点 自定义数据处理:使用脚本语言处理请求数据,实现高度定制化的数据处理和生成。动态数据生成:在请求发送前生成动态数据,如随机数、时间戳等。变量设置:设置…

git(Linux)

1.git 三板斧 基本准备工作: 把远端仓库拉拉取到本地了 .git --> 本地仓库 git在提交的时候,只会提交变化的部分 就可以在当前目录下新增代码了 test.c 并没有被仓库管理起来 怎么添加? 1.1 git add test.c 也不算完全添加到仓库里面&…

学习Java的日子 Day56 数据库连接池,Druid连接池

Day56 1.数据库连接池 理解:池就是容器,容器中存放了多个连接对象 使用原因: 1.优化创建和销毁连接的时间(在项目启动时创建连接池,项目销毁时关闭连接池) 2.提高连接对象的复用率 3.有效控制项目中连接的…

Jmeter测试工具的安装和使用,mac版本,jmeter版本5.2.1

Jmeter测试工具的安装和使用JSON格式请求 一、安装1、安装jdk包和设置java环境2、去官网下载Jmeter3、解压后,打开mac终端,进入apache-jmeter的bin文件开启jmeter 二、使用jmeter1、添加线程2、添加HTTP请求3、配置请求的协议、IP地址、端口号、请求方法…

Envoy 源码解析(一):Envoy 整体架构、Envoy 的初始化

本文基于 Envoy 1.31.0 版本进行源码学习 1、Envoy 整体架构 1)、核心组件 Envoy 包含以下四个核心组件: Listener(监听器):定义了 Envoy 如何处理入站请求。一旦连接建立,请求会被传递给一组过滤器进行处…

【VUE3】VUE组合式(响应式)API常见语法

pnpm常用命令 pnpm i //pnpm安装VUE3常见语法汇总 ref() //const count ref(0) //count.value(访问值,包括对象要加.value) //任何类型的值,包括深层嵌套的对象或则JS内置数据结构 await nextTick() //要等待 DOM 更新完成后…

CGAL CGAL::Polygon_mesh_processing::self_intersections解析

CGAL::Polygon_mesh_processing::self_intersections 是用于检测多边形网格(Polygon Mesh)中的自相交的函数。自相交是指网格中的某些面(例如三角形)与同一网格中的其他面交叉的情况。这种情况通常是不期望的,因为它会…

⭐ Unity 资源管理解决方案:Addressable_ Demo演示

一、使用Addressable插件的好处: 1.自动管理依赖关系 2.方便资源卸载 3.自带整合好的资源管理界面 4.支持远程资源加载和热更新 二、使用步骤 安装组件 1.创建资源分组 2.将资源加入资源组 3.打包资源 4.加载资源 三种方式可以加载 using System.Collections…

Vue前端开发2.3.5 条件渲染指令

本文介绍了Vue中两种条件渲染指令:v-if和v-show。v-if通过布尔值控制元素的DOM树存在,适用于不频繁切换显示状态的场景;v-show则通过CSS的display属性控制显示,适合频繁切换。通过创建单文件组件示例,演示了如何使用这…

GitLab指定用户分配合并权限

进入项目 -》 Project Settings Repository -》展开 Protected branches -》 添加要保护的分支,设置角色 管理用户角色权限 查看到不同用户的角色,一般设置Developer只有Merger Request权限,Maintainer还有Merge审批权限 GitLab 中的权限…

计算机网络socket编程(5)_TCP网络编程实现echo_server

个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 计算机网络socket编程(5)_TCP网络编程实现echo_server 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记,欢迎大家在评论区交…

C++ 二叉搜索树(Binary Search Tree, BST)深度解析与全面指南:从基础概念到高级应用、算法优化及实战案例

🌟个人主页:落叶 🌟当前专栏: C专栏 目录 ⼆叉搜索树的概念 ⼆叉搜索树的性能分析 ⼆叉搜索树的插⼊ ⼆叉搜索树的查找 二叉搜索树中序遍历 ⼆叉搜索树的删除 cur的左节点为空的情况 cur的右节点为空的情况 左,右节点都不为…

uniCloud云开发

uniCloud 是 DCloud 联合阿里云、腾讯云、支付宝云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。 普通云函数 callFuction方式云函数,也称之为普通云函数 uni-app的前端代码,不再执行uni.request联网,而是通过…

org.apache.log4j的日志记录级别和基础使用Demo

org.apache.log4j的日志记录级别和基础使用Demo,本次案例展示,使用是的maven项目,搭建的一个简单的爬虫案例。里面采用了大家熟悉的日志记录插件,log4j。来自apache公司的开源插件。 package com.qian.test;import org.apache.log…