js的方法：
var Base64 = {
// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encoding
encode : function (input) {
var output = ""
var chr1, chr2, chr3, enc1, enc2, enc3, enc4
var i = 0
input = Base64._utf8_encode(input)
while (i <input.length) {
chr1 = input.charCodeAt(i++)
chr2 = input.charCodeAt(i++)
chr3 = input.charCodeAt(i++)
enc1 = chr1 >>2
enc2 = ((chr1 &3) <<4) | (chr2 >>4)
enc3 = ((chr2 &15) <<2) | (chr3 >>6)
enc4 = chr3 &63
if (isNaN(chr2)) {
enc3 = enc4 = 64
} else if (isNaN(chr3)) {
enc4 = 64
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4)
}
return output
},
// public method for decoding
decode : function (input) {
var output = ""
var chr1, chr2, chr3
var enc1, enc2, enc3, enc4
var i = 0
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
while (i <input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++))
enc2 = this._keyStr.indexOf(input.charAt(i++))
enc3 = this._keyStr.indexOf(input.charAt(i++))
enc4 = this._keyStr.indexOf(input.charAt(i++))
chr1 = (enc1 <<2) | (enc2 >>4)
chr2 = ((enc2 &15) <<4) | (enc3 >>2)
chr3 = ((enc3 &3) <<6) | enc4
output = output + String.fromCharCode(chr1)
if (enc3 != 64) {
output = output + String.fromCharCode(chr2)
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3)
}
}
output = Base64._utf8_decode(output)
return output
},
// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n")
var utftext = ""
for (var n = 0n <string.lengthn++) {
var c = string.charCodeAt(n)
if (c <128) {
utftext += String.fromCharCode(c)
}
else if((c >127) &&(c <2048)) {
utftext += String.fromCharCode((c >>6) | 192)
utftext += String.fromCharCode((c &63) | 128)
}
else {
utftext += String.fromCharCode((c >>12) | 224)
utftext += String.fromCharCode(((c >>6) &63) | 128)
utftext += String.fromCharCode((c &63) | 128)
}
}
return utftext
},
// private method for UTF-8 decoding
_utf8_decode : function (utftext) {
var string = ""
var i = 0
var c = c1 = c2 = 0
while ( i <utftext.length ) {
c = utftext.charCodeAt(i)
if (c <128) {
string += String.fromCharCode(c)
i++
}
else if((c >191) &&(c <224)) {
c2 = utftext.charCodeAt(i+1)
string += String.fromCharCode(((c &31) <<6) | (c2 &63))
i += 2
}
else {
c2 = utftext.charCodeAt(i+1)
c3 = utftext.charCodeAt(i+2)
string += String.fromCharCode(((c &15) <<12) | ((c2 &63) <<6) | (c3 &63))
i += 3
}
}
return string
}
}
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
此标签是用来定义一些未来可能要重复使用的图形的，里面的图形不会显示出来,官方的定义为“引用的元素容器”。
icon fonts利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。
Base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的字符串理论上将要比原来的长1/3。最常见的用于传输8Bit字节代码的编码方式.通俗的就是加密解密的一种算法.
现在网站为了提升用户的浏览体验越来越多的使用了图片，而这些图片通常以 Base64 的形式存储和加载。因此各位开发工程师肯定对 Base64 毫不陌生了，那么你知道 Base64 究竟是什么，为什么要使用 Base64，以及 Base64 的优缺点吗？
Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况，且编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容。
看到这里相信大家也能够意识到，这种编码格式无法充分利用存储资源，效能较低。那为什么还会成为网络中的普遍用法呢？
其实 Base64 最早是应用在邮件传输协议中的。当时邮件传输协议只支持 ASCII 字符传递，使用 ASCII 码来表示所有的英文字符和数字还有一些符号。这里有一个问题，如果邮件中只传输英文数字等，那么 ASCII 可以直接支持。但是如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会出现非英文数字的情况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。非英文字符和控制字符在传输过程中很容易产生错误，影响邮件的正确传输。为此才有了诞生了一个新的编码规则，把二进制以 3 个字节为一组，再把每组的 3 个字节（24 位）转换成 4 个 6 位，每 6 位根据查表对应一个 ASCII 符号，这就是 Base64。
Base64 将 8 位为一个单元的字节数据，拆分为 6 位为一个单元的二进制片段。每一个 6 位单元对应 Base64 索引表中的一个字符。简单举个例子，下图中 M 的 ASCII 码是 77 , 而转换为二进制后前六位二进制对应值为 19，为 Base64 字典中的 T。
当然这里也会有一个问题，如果要编码的二进制数据不是 3 的倍数，那就会剩下一至二个字节。为此 Base64 使用 000000 字节值在末尾补足，使其字节数能够被 3 整除，补位用 = 表示，= 的个数可表示补了多少字节，并在解码时自动去除。总体来看相比编码前，Base64 编码后的字符增加了约 33%。
前面我们也提到了 Base64 编码是现在网站小图片的主要加载方式，那 Base64 到底是如何处理图片的呢？
我们都知道图片在网页中的使用方法通常是使用 img 标签的形式，而 img 标签的 src 属性会指定一个远程服务器上的资源。在网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求。但是这是非常占用网络资源的，而且因为大多数浏览器都有并发请求数的限制，如果你的网页中嵌入了过多外部请求，就很容易出现页面加载速度过慢的情况。
而 Base64 编码可以通过 Data URL 技术让图片以字符串的格式直接嵌入页面，与 HTML 成为一体。这样在加载时就可以避开对外部资源的请求
为什么选择 Data URL
至于为什么选择 Data URL 技术，是因为跟传统的外部资源引用方式相比，它拥有以下优点：
通过这种方式 Base64 编码可以更为快捷方便得对前端的各种图片资源进行优化。我们看一个具体的例子：
可以明显看到 Base64 编码将一幅图片数据编码成一串字符串，并使用该字符串代替图像地址。尽管乍一眼看上去没有任何图片相关的内容，但它最终渲染出的毫无疑问是一张完整的图片效果。
当然使用 Data URL 来进行 Base64 图片编码并不是完美的，它有着两个不容忽视的缺点：
无法被浏览器缓存也就意味着每次访问都需要重新请求资源，这对于服务器压力是比较大的。那有没有办法，能将这些数据也放入浏览器缓存中呢？
加快加载小技巧
其实大部分网站的背景图构成，是一个宽高只有几个像素的小图片，通过将它平铺成为背景图。通常我们将小图片保存成 GIF 或 PNG 格式，然后在 CSS 的 background-image 属性中引用图片地址。但是浏览器本身并不在意 URL里写的是什么，只是需要通过它获取需要的数据。
所以我们完全可以使用 CSS 样式文件，让 Data URL 形式的图片存储在 CSS 样式表中。这样浏览器就会缓存 CSS 文件，也就会缓存图片，能够进一步提高页面加载效率。
上图就是一个简单的使用案例，通过这种方式既避免了让背景图片独自产生一次 HTTP 请求的情况，还让背景图片和 CSS 文件一起被浏览器缓存起来，避免了每次打开网页都加载一次背景图片的情况，让改善用户的浏览体验更为快速流畅。
通过 Date URL 技术与 Base64 编码的结合有效减少 HTTP 请求，让用户访问体验更好，这其实是我们一个开发过程中的小技巧，希望看完后能够带给大家一些帮助。
