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

转自：http://www.zhangxinxu.com/wordpress/?p=2341

1、base64百科

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

某人： 唉，我完全废柴了，为什么上面明明是中文，洒家却看不懂嘞，为何？~~

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

上面代码你们都熟悉吧，迅雷下载连接哦（咳咳，该地址很纯洁），就是base64编码后的地址，因此之后看到这种：一堆连续字母，最后有1~2个"="的代码就是base64。

base64:URL就是URL地址是base64编码的。

例以下面这个：

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

2、base64与文件数据编码

在网络中，经过HTTP传输的文件还能够经过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。固然，能够base64编码的文件不只仅是图片，也能够是字体文件，例如(中间有缺省)：

@font-face{
    font-family: forTest;
    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');
}

天然，对于background-image图片，咱们也可使用base64编码进行传输，例如：

background-image:url(data:image/gif;base64,);R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==

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

3、如何得到图片的base64编码

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

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
    htmlImage = '<img src="'+ e.target.result +'" />';    // 这里就是base64编码
}
reader.readAsDataURL(file);e.target.result

上面说的你只须要了解，实际上，目前base64编码工具很多，对于咱们前端制做，下面这个本地图片 base64编码获取页面是值得推荐的：Encode Data URL By PuterJam

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

该转换页面的原理就是上面所说的HTML5 文件本地预览原理，具体能够本身查阅资料。

4、使用base64:URL的优缺点

我的以为base64:URL传输图片文件的好处在于：

1. 减小了HTTP请求
2. 某些文件能够避免跨域的问题
3. 没有图片更新要从新上传，还要清理缓存的问题

不足在于：

1. 浏览器支持
   使用base64编码图片做为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持，这里被@前端的那点破事鄙视了 ）。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优势不存在了。
2. 增长了CSS文件的尺寸
   base64编码图片本质上是将图片的二进制大小以一些字母的形式展现，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被彻底嵌入到CSS文件中（不过幸运的是也能够被gzip了，而图片文件被gzip效果不明显）。
3. 编码成本
   图片完成后还须要base64编码，目前估计手工完成的多，所以，增长了必定的工做量，虽然很少。

5、优缺点权衡下的实际应用价值

权衡上面所展现的优缺点，貌似base64:URL图片没有什么用武之地啊，实际上非也，有一种状况时有base64编码做为background-image背景图片利要远大于弊的。何种状况呢？

在web页面制做的时候，因为某些现实缘由，咱们能够会用到下面这一类图片：

• 这类图片不能与其余图片以CSS Sprite的形式存在，只能独行
• 这类图片从诞生之日起，基本上不多被更新
• 这类图片的实际尺寸很小
• 这类图片在网站中大规模使用

想一想看，你的网站中有没有同时知足上面四条的背景图片呢？

//zxx: 假设已通过去了今天朝鲜火箭勃起的时间

怎样，想到了没？提点下，例以下面这个企鹅微博中的loading gif图片(537字节，勉强算是)：

537字节的大小实际上仍是偏大了点，让咱们看个更better的例子，你们能够去豆瓣首页，能够看到下图所示的垂直线：

为background-image图片（for 等高布局）：

从bg_line.png这样的命名能够预知（不是：home_bg_line.png），该背景图片会在（能够在）网站中多处使用。

图示平铺图片地址为：http://img3.douban.com/pics/bg_line.png

大小1 * 1 像素，png格式，大小88字节。//zxx: 当图片颜色简单到必定程度的时候，gif格式图片大小要小于png8, 因此，这个点若是保存成gif格式，只须要43字节，为png一半大小

像这种图片大小极小，但又占据了一次HTTP请求，同时不能与其余背景图片Sprite，而网站不少地方都使用。所以，没有什么背景图片比这个更适合使用本文的“base64:URL图片”技术进行优化了！

为了比对优化的好处，咱们来看个实际的demo.

6、base64:URL图片的实际应用

我博客首页的我的信息介绍处的虚点是使用背景图片实现的（考虑到IE6 dot边框跟dashed搞基，不一样浏览器虚点间距差别等）。

如今，demo就要展现如何使用base64:URL图片实现该虚点效果。

您能够狠狠地点击这里：base64 URL虚点背景demo

相关CSS代码以下：

.dot {
    background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);
   *background-image: url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/zxx_dotted.gif);    // IE6~IE7
    background-repeat: repeat-x;
    background-position: left bottom;
}

能够看到，使用base64的CSS代码量基本上跟下面使用完整地址差很少，所以，对于一些级小尺寸图片，所谓增长CSS文件大小的不足能够忽略（再考虑到gzip），同时减小了1个HTTP请求，加上这个图片网站不少地方使用，所以，累积节约的HTTP请求就很惊人了。

固然，惟一美中不足的是，对于IE6~IE7浏览器不能享受到这种“百利仅一害”的优化技术，咱们还须要专门为它们擦屁股。不过，权衡来看，仍是很值得的，毕竟目前，在中国IE8浏览器是大头（就在最近），IE6, IE7 就乖乖地泻下去吧~~

最后，展现下demo页面YSLOW分析图吧，能够看到，没有任何CSS background-image请求~~

7、虽是一篇小短文，结尾也要干爹疼

IE6/IE7又一次暴露了本身的屌丝形象，对其，我已无力再次吐槽，不过，毕竟历史长河中的有功之人，就等其静静退出历史舞台吧。

再次提醒下，使用base64编码代替CSS背景图片是有局限性的，并非全部图片都适合使用base64编码这种技术的。例如：
1. CSS Sprite图片后期维护会死人，只能是独立图片
2. 图片尺寸过大，CSS文件就会变成了臃肿的大棒子，反而不利于加载
3. CSS文件的优势就是重用，所以，若是背景图片就一个地方使用，减小的请求数有限，考虑到其余成本，还不如直接使用普通url图片地址
4. 若是图片常常改动，好吧，哥们，苦逼的前端加班仔中就多了一个你

所以，技术自己虽好，需天时地利人和方可以使用。

在微博上，@朴灵提过MHTML这个东东，好像与base64编码相关的，对此我几乎一无所知，但愿有相关了解的人能够补充下。

另外，周末时节，想着明早能够睡到天然醒，文笔过于仓促，出现错误在所不免，文中有表述不许确的地方欢迎指正，感谢阅读，祝你们周末快乐！