最新消息:

使用data base64编码减少Html页面请求

技术经验 goomoon 2751浏览 0评论

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

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

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

data类型的图片格式为:

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

1. 域名解析

2. 开启TCP连接

3. 发送请求

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

5. 下载资源

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

base64生成地址一:http://dataurl.net/#dataurlmaker
base64生成地址二:http://www.pjhome.net/web/html5/encodeDataUrl.htm

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

转载请注明:刘召考的博客 » 使用data base64编码减少Html页面请求

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址