data URI scheme及其应用
2016-01-09 12:22
204 查看
data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取。这样从表面上看会降低一次HTTP的请求,实现了对于网页的优化(只是看了其它一些文章data URI由于将图片採用了base 64的编码方式进行表达。所以还是须要进行HTTP去下载内容,并且这种渲染方式同一时候也加大了内存。cpu等等的压力,因此选择的时候须要进行性能方面的权衡)。
比方一张图片用http请求方式进行请求而且显示的方法:
当中,data - 取得数据的协定名称;image/png
- 数据类型名称。base64 - 数据的编码方法;iVBOR.... - 编码后的数据
对于图片的base 64编码后的获取方式,能够用 PHP 的
base64_encode() 进行编码,或者用canvas的toDataURL去获得。
Data URL 尽管节省 HTTP 请求,可是倘若这个图像要在网页多个地方显示的话。便会加大网页的内容,延长了下载的时间。当中一个解决的方法是在一个 CSS class 中增加 data URL。在须要显示图像的区块调用这个 class;
另外一个避免过多html内容造成http请求加重的方法是採用 Data URI+localstorage的方法来实现图片资源的缓存,也就是将图片转化为base 64的字符串形式,配上图片的过期信息组成json存储到localstorage中,从而实现缓存的效果。
var imgAsDataURL = imgCanvas.toDataURL("image/png");
比方一张图片用http请求方式进行请求而且显示的方法:
<img src="http://sjolzy.cn/images/A.png"/>相同的效果使用 data URI scheme ,将图片转化为Base64编码方式后能够这样写进html中。非常显然会降低一次请求的耗时
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
当中,data - 取得数据的协定名称;image/png
- 数据类型名称。base64 - 数据的编码方法;iVBOR.... - 编码后的数据
对于图片的base 64编码后的获取方式,能够用 PHP 的
base64_encode() 进行编码,或者用canvas的toDataURL去获得。
Data URL 尽管节省 HTTP 请求,可是倘若这个图像要在网页多个地方显示的话。便会加大网页的内容,延长了下载的时间。当中一个解决的方法是在一个 CSS class 中增加 data URL。在须要显示图像的区块调用这个 class;
另外一个避免过多html内容造成http请求加重的方法是採用 Data URI+localstorage的方法来实现图片资源的缓存,也就是将图片转化为base 64的字符串形式,配上图片的过期信息组成json存储到localstorage中,从而实现缓存的效果。
var imgAsDataURL = imgCanvas.toDataURL("image/png");
相关文章推荐
- 【重磅】移动网络性能揭秘(下)--网络协议及性能提升实践
- 2015苏州大学ACM-ICPC集训队选拔赛(2) 1001 1003 1010
- Maven-clover2-plugin
- cxf发布webservice 服务
- sunxi分区那些事儿
- win7升级到win10正式版后怎么再重新返回win7系统?
- MFC 动态创建控件
- [cocos2dx]我的学习记录
- C++头文件保护符和变量的声明定义
- java7新特性介绍
- MyEclipse/Eclipse安装插件的几种方式
- MyEclipse/Eclipse安装插件的几种方式
- Android开发中的MVP架构
- 三级分销系统
- bzoj4012: [HNOI2015]开店
- Win10 Mobile预览版10586.63快速版累积更新:主要bug修复
- Mouse Without Border 无法安装问题
- 有关PMP考试成绩如何查询
- ffmpeg 转成MP3采样率8000
- leetcode之Sort Colors