base64:是一种基于64个可打印字符来表示二进制数据的表示方法。经常使用于在一般处理文本数据的场合,表示、传输、存储一些二进制数据,包括MIME的电子邮件及XML的一些复杂数据。webpack
可打印字符:在显示器上输出且可以看见。ASCII 32~128。git
上文64个可打印字符特指:A-Z
、a-z
、0-9
,其他两个可打印字符(不一样系统不一样的字符)。github
应用例子:web
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D"/>浏览器
【Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入,减小http请求。可是浏览器不会缓存这种数据。】缓存
data URI 的格式: data:[<mediatype>][;base64],<data>网络
【Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。】性能
与webpack的关联:编码
url-loader: Loads files as base64
encoded URL。url
用法:url-loader
功能相似于 file-loader
,可是在文件大小(单位 byte)低于指定的限制时,能够返回一个 DataURL。
{ loader: 'url-loader', options: { limit: 8192 //小于这个字节数就会用base64的方式编码数据,而后嵌入到网页中。 } }
link: https://www.webpackjs.com/loaders/url-loader/
优缺点:(摘自掘金文章)
- Base64会让样式文件变得很大,从而阻塞关键下载和渲染。
- 样式文件增长的体积没法经过Gzip很好地压缩。
- 在缓存方面,本能够分别设置缓存策略的图片和样式表也混在一块儿,没法区别更新。
- 在浏览器渲染方面,也增长了解析CSS树的耗时。
- 在CSS文件中过多使用Base64时,会让首次渲染时间(First Paint)增长2倍以上,在移动端,因为网络和手机性能的缘故,这一时间可能会增长10倍以上。
link:https://juejin.im/entry/58ca2b9dac502e0058868693