data URI scheme及其应用

data URI scheme通俗来讲就是图片直接塞到HTML而不是由HTTP。这样从表面上看会降低一次HTTP的请求，实现了对于网页的优化（只是看了其它一些文章data URI由于将图片採用了base 64的编码方式进行表达，所以还是须要进行HTTP去下载内容，并且这种渲染方式同一时候也加大了内存，cpu等等的压力，因此选择的时候须要进行性能方面的权衡）。

比方一张图片用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");

转载于:https://www.cnblogs.com/mengfanrong/p/4599837.html

data URI scheme及其应用相关推荐

编码 data:text/html;c,关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
服务器端发送邮件签名采用Data URI scheme包含图片
要在服务器端基于HTML,拼接邮件内容,原来用户使用outlook采用了邮件签名,签名里含有公司Logo的图片,Outlook的msg文件里是专有的cid:xxxx,这里借用Data URI sche ...
使用Data URI Scheme优雅的实现前端导出csv
问题描述项目里需要实现一个导出csv的功能,这是个老生常谈的需求,而且我们使用的是iview的组件库,按道理说实现起来应该简单,但实则不然,我在做的时候遇到了一些问题.受限于请求需要token.后端 ...
Data URI scheme 在 html 中嵌入小图片
例如: <img src="https://img-blog.csdnimg.cn/2022010704064257868.png" /> 这会显示一张图片,网上的资料 ...
Data URL和图片，及Data URI的利弊
Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base6 ...
Data URI详细介绍
一.URI介绍 URI(统一资源标识符) 是 uniform resource identifier的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容是一个地址,那么此时的 URI ...
【Win10 UWP】URI Scheme（二）：自定义协议的处理和适用场景
上一篇提到Windows Store协议的使用,其实Windows Store协议仅是系统内建的一种协议规则.我们也可以自己定义一套规范的URI-Scheme,除了可以给其他App调用外,本应用也可以 ...
前端性能优化：使用Data URI代替图片SRC
日期:2013-7-6 来源:GBin1.com 提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量.减少请求可以让你的网站加载更快,而其中一 ...
浏览器还 data URI协议
一般浏览器引用资源时,都是用http和https协议,部分浏览器和所有的ftp软件都会使用ftp协议,引用本地文件会使用file协议,此外还有mms.thunder等各种协议. 不过刚才突然发现Fir ...

data URI scheme及其应用

data URI scheme及其应用相关推荐

最新文章

热门文章