base64:URL背景图片与web页面性能优化

发布日期:2020-02-02

一、base64百科

Base64是网※络上最常见的用于传输8Bit字节代码的∨编码方式之一,可用于在HTTP环境下传递较长的标识信息。

某人: 唉,我彻底废柴了,为何上面明明└是中文,洒家却看不懂嘞,为什么?

好吧,我也不喜欢专业术语的解释。你只要知道,base64编码就是长得像下面这样子的代码:

thunder://QUFodH〖RwOi8vdⅦ3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nbлy5naWZaWg==

上面│┃代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),就是base64编码后的地址,所以以∽后看到这种:一堆┐连续字母,最后有1~2个“=”的代码就是base64。▧

base64:URL就是UR∠L地址是base64编码的。

例如下面这个:

<img src="data:image/gif;base64,R0lGODlhAwADAIAB…AL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

二、base64与文件数据编Ⅻ码

在网络中,通过『HTTP传┈┉输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。当然,可以base64编码的文件不仅仅是图片,也可以是字Θ体文件,例如(中间有缺省):

@font-face{

font-family: forTes∥t;

src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');Б

}

自然,对于background-image图片,我们也可以使用base64α编码进行传输,例如:

bacↅkground-┊┋image:url(data:image/gif;base64,R0lGODlhBAABAIA♨BAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

而使用base64编码作为background-image图片就是本文要着重阐述的。

三、如何获得图片的base64编码

其实在我之前“基于HTML5的可预览多图片Ajax上传”以及“zSlide-基于C⿲SS3/HTML5演示文档jQuery插件”Ъ实际上就与图片的base64编码的获取打过交道了⺌。如下本地图片转换成可预览的base64编码的核心脚本:

var re☉ader = new FileReader(), htmlImage;

reader.onload = function(e) {

htmlImage =☆ '<img src="'+ e.target∞.result +'" />'; // 这里e.target.result就是base64编码

}

reader.readAsDataURL(file);

上面说的你只需要了解,实际上,目前base64编码工具不少≌,对于我们前端制作,下面这个本地图片 base64编码获取页面是值得推荐的:Encode Dataг URL By PuterJam♀

直接将桌面图片拖到条条里就有了响应的backgro〒und-image url属性可用的base64地址了:

该转换↔页面的原理就是上面所说的HTML5 文件本地预览原理,具体可以自己查阅资料。

四、使用base64⊙:URL的优缺点

个人觉得base64:URL传输图片文件的好处在于:

1.减少了HTTP请求

2.某些文件可以避免跨域的问题

3.★没有图片更新要重新上传,还要清理缓存的问╞题҉

不足在于:

1.浏览器支─━持

使用base64编码图片作为背景图片的这种技术IE6/I―E7浏览器是不支持的(IE9浏览器IEЛ7模式下支持,这里被@前端的那点破事鄙视了 )。对于目前PC页面,兼容性问题使没有文件上传以及无需更Я新缓存的优点不存在了。

2.增加了CSS文件的尺寸

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示,例如一个1024Й字节的图片Ⅴ,base64编码后至少1024个☏字符,这个大小会被完全嵌入到C╤SS文件中(№不过幸运的是也可以被gzip了,而♠图片文件被gzip效果不明显)。

3.编码成本

图片完ω成后还需要base64编⊕码,目前估计手工完成的多,因此,增加了一定的工作量,虽然不多。