目录
一、作用
将非ASCLL码数据转换为ASCLL码数据,便于网络传输(某些系统仅支持ASCLL编码);
二、使用方法
1)测试代码:
//window.btoa("谢谢")//error
window.btoa(window.encodeURI("谢谢"))//'JUU4JUIwJUEyJUU4JUIwJUEy'
window.atob("JUU4JUIwJUEyJUU4JUIwJUEy")//'%E8%B0%A2%E8%B0%A2'
window.decodeURI(window.atob("JUU4JUIwJUEyJUU4JUIwJUEy"))//'谢谢'
2)结果
三、图片的Base64编码
1.转换过程
图片的 base64 编码就是可以将一幅图片数据编码成一串字符串,使用该字符串代替图像地址。这一串字符串相当于图片的css样式。
2.作用(优点)
1)网页上的每一个图片,都是需要消耗一个 http 请求下载而来的,图片的下载始终都要向服务器发出请求。
而base64图片可以随着 HTML 的下载同时下载到本地。
2)没有跨域问题,无需考虑缓存、文件头或者cookies问题
3.使用base64的前提
图片尺寸足够小
4.使用场景
如:需要通过重复显示小图片实现的背景图
5.将图片转为Base64的方法
1)将要获取Base64数据的图片 拖入 google浏览器中
2)F12打开调试工具,选择sources菜单
3)找到刚才拖进来的图片,并点击下方的{}格式化base64数据,如图3-1所示,即可得到图片的base64数据,如图3-2所示
4)使用时加上前缀“data:image/png;base64,"即可。
注:png是图片的格式,要根据不同的图片格式修改,还可以是gif,jpg等
![](https://i-blog.csdnimg.cn/blog_migrate/be5897816ad33fd918c349ecad649171.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8da55130a9b1a1b30cbae00f29535c10.png)
6.查看base64图片的方法
图片较小时,可以直接在浏览器地址栏中输入base64数据打开。如:将下面的url复制到地址栏,即可打开图片。
data:image/png;base64,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
当图片过大时,不能直接在浏览器地址栏打开或只能看到部分数据,因为浏览器地址栏可输入的字符是有限的。
7.base64图片的缺点
增加了css体积,会导致CRP(Critical Rendering Path,关键渲染路径)的阻塞,影响渲染,导致用户会长时间注视空白屏幕。
CSSOM 阻止任何东西渲染,(意味着在CSS没处理好之前所有东西都不会展示),而如果CSS文件中混入了Base64,那么(因为文件体积的大幅增长)解析时间会增长到十倍以上。
所以只适合小图片的渲染。