数据URI的目的是什么？

Question

数据URI的目的是什么？

为什么资源有时嵌入数据URI中,而不是使用链接到存储为服务器上文件的资源的常规URI？

Answer 1

1.减少服务器请求

通过减少获取资源所需的HTTP请求数,可以使用数据URI来减少服务器负载并提高客户端性能.例如,这个HTML:

<img src="assets/bullet.png">

Run Code Online (Sandbox Code Playgroud)

......可以替换为:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA
  ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5
  o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9
  D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3
  pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj
  eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38
  k6jyMAAAAASUVORK5CYII="
>

Run Code Online (Sandbox Code Playgroud)

...生成这样的图像: 子弹图标少一个HTTP请求.

注意:似乎无法在Stack Overflow帖子中嵌入数据URI图像; 但是,上面的图像使用显示的数据URI上传到图像托管服务.

例如,如果您的站点使用了许多小图标,请在样式表中将它们全部指定为数据URI:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) }
.icon-bullet-green { background-image: /* ... */ }
.icon-save { background-image: /* ... */ }
.icon-load { background-image: /* ... */ }
.icon-delete { background-image: /* ... */ }
/* ... etc. */

Run Code Online (Sandbox Code Playgroud)

...可以消除大量的HTTP请求,但代价是整体下载大小,易读性以及错误编辑可能导致URI无意义(并且难以修复)的可能性增加.

实现图像相同结果的另一种方法是使用CSS精灵.

2.将内容嵌入单个文件中

数据URI可用于包含在单个文档中正确显示页面所需的所有资源.这在例如与软件一起分发的README文件中可能是有用的.理论上,数据URI也可以用作使用附件在HTML电子邮件中嵌入资源的替代方法,但实际上,客户端对数据URI的支持太不可靠,因此这是一种有用的技术.

3.避免浏览器警告

如果页面包含通过HTTP和HTTPS混合提供的内容,则某些浏览器会显示警告.如果您的服务器设置为通常通过HTTP提供图像等静态内容,但通过HTTPS提供动态内容,则可以使用数据URI嵌入静态内容.

这里唯一需要注意的是,DATA URI实际上可能会损害性能,因为它们不是单独从页面本身缓存的,并且当遇到DATA URI时,浏览器下载引擎的工作方式并不总是针对高性能进行优化.作为最佳实践,请避免使用大型数据URI,并避免使用未在样式表或某些可重用资源中缓存的DATA URI. (4认同)
**数据URL的另一种用途**数据URL可以根据需要从Javascript动态生成,然后链接到"a"标记,以创建浏览器生成的数据的"下载"文件,而无需服务器. (2认同)

Answer 2

and*_*ndi 10

除了之前的答案(这是一个非常好的总结),我最近一直在使用它的一件事是字体.如果我只需要使用字体中的一小部分字符(例如,徽标的设计字体或特殊的dingbat项目符号图标),我可以将我需要的字符编码到CSS @ font-face声明中而不是让用户下载整个字体文件.

例如,如果我只想要来自Eggfaces(http://www.dingbatdepot.com/details/EggfacesTFB)的魔鬼(d)和天使(e)面孔,那么我可以使用FontSquirrel的webfont生成器工具(http:// www .fontsquirrel.com/tools/webfont-generator)创建这样的东西:

@font-face {
    font-family: 'eggfaces';
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff');
    font-weight: normal;
    font-style: normal;
}

Run Code Online (Sandbox Code Playgroud)

看一下这个小提琴的例子:http://jsfiddle.net/vuuVh/

归档时间：	13 年，1 月前
查看次数：	1293 次
最近记录：	12 年，4 月前