编码 data text html c,使用data base64编码减少Html页面请求

编码 data text html c,使用data base64编码减少Html页面请求

前端开发中，对于web页面的加载效率一般都想尽办法求快！怎么才能快呢，减少页面请求就是很重要的一招！data base64编码的原理是按bit将每6个bit转换成Base64编码表中的相应字符，利用它可以实现浏览器绘制图片，从而减少http请求, 对于网页优化来说是一个不错的方法。在jquery mobile和天猫的手机站上面都有用到此技术，相信在将来使用的将会越来越广泛。

在网页布局中很多时候都需要转入一些数据如图片，而这样做的就会增加http请求，给服务器带来更大的压力。而当载入小图片(如1KB大小的图片)的时候，往往会由于请求时带上一些额外的信息进行传输，可能request带的数据比实际图片的数据量还大。所以当请求越多的时候，在网络上传输的数据自然就多，传输速度自然就慢了。而针对此问题，则可以采用data base64编码的方式直接嵌入网页，而不是从外部载入，以减少http请求，当然有个小缺点就是页面内容变大了。

关于data类型的url格式在98年就已经提出了，现在绝大部分的浏览器都能支持，比如使用IE6内核的国内浏览器。下面是几种data类型的url：

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

data:,

data:text/plain,

data:text/html,

data:text/html;base64,

data:text/css,

data:text/css;base64,

data:text/javascript,

data:text/javascript;base64,

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

data类型的图片格式为：

XHTML

1

http连接的分为以下几个阶段:

1. 域名解析

2. 开启TCP连接

3. 发送请求

4. 等待(主要包括网络延迟和服务器处理时间)

5. 下载资源

因此在载入图片的时候可以使用data base64编码来减少请求数，以减少请求数，当然它也有一缺点：会使文件变大、可读性变差，因此在酌情考虑使用来提高页面性能。

当然，根据以上描述，特别是在移动端的页面里，当我们要尽量保证首屏的加载时间，但有必须有图片时候，可以考虑这种办法哦。