data：urls –它们是什么以及如何使用它们

If you follow this blog you already know the infamous website performance rule #1 - reduce the number of HTTP requests. Actually, to celebrate Earth Day and to jump the "go-green" wagon/jargon, my favourite performance mantra as of late is "Reduce, Reuse, Recycle" (the Recycle part is a wee fuzzy but, oh well)

如果您关注此博客，则已经知道臭名昭著的网站性能规则＃1-减少HTTP请求的数量。 实际上，为了庆祝世界地球日并跳起“绿色”旅行车/行话，最近我最喜欢的性能口号是“减少，重复使用，回收”(回收部分有些模糊，但是，很好)

So to reduce the number of requests for JavaScript files, you combine all .js into one monolithic file.

因此，为减少对JavaScript文件的请求数量，请将所有.js组合为一个整体文件。

Same for .css

.css相同

For images - use CSS sprites to create one image files that contains all your little icons.

对于图像-使用CSS精灵创建一个包含所有小图标的图像文件。

Yet another way to minimize the number of HTTP requests is to use data URLs (proper name is data URI scheme).

减少HTTP请求数量的另一种方法是使用数据URL(专有名称是data URI scheme )。

“数据... uri？urgh-i？请举个例子！” ("data... uri? urgh-i? An example, please!")

Say you have this minuscule image:

假设您有这个微不足道的图片：

which you include like:

其中包括：

<img src="http://phpied.com/images/check.png" />

This way you're actually using the http URI scheme.

这样，您实际上就在使用http URI方案。

Same thing using data URI will look like:

使用数据URI的相同内容如下所示：

And the code for it:

和它的代码：

<img src="https://i-blog.csdnimg.cn/blog_migrate/efa62c41b106cb1d7cf65b4ef5340071.png" />

This way the image in inlined in the HTML and there is no extra HTTP request to retrieve it.

这样，图像就可以内联在HTML中，并且不需要额外的HTTP请求来检索它。

数据URI语法 (data URI syntax)

Let's take a look again at this img tag and its slightly disturbing syntax:

让我们再次看一下这个img标签及其稍微令人不安的语法：

<img src="https://img-blog.csdnimg.cn/2022010702312076744.png" />

You have:

你有：

• data - name of the scheme

  data -方案名称

• image/png - content type

  image/png内容类型

• base64 - the type of encoding used to encode the data

  base64用于对数据进行编码的编码类型

• iVBOR... - the encoded data

  iVBOR...编码数据

• some , and ; and : sprinked for good measure
  一些和; 和：撒好

如何进行base64编码？(How do I base64-encode?)

While there are some online tools that will let you upload an image or point to a URL, you can simply do it from PHP and the command line.

虽然有一些在线工具可让您上载图像或指向URL，但是您可以简单地从PHP和命令行中进行操作。

Say you have the filename check.png. Then go:

假设您有文件名check.png 。 然后去：

$ php -r "echo base64_encode(file_get_contents('check.png'));"

This will spit out encoded content for copy-pasting pleasure. Naturally you can also do this from your application code, if needed.

这将吐出编码后的内容，以实现复制粘贴的乐趣。 当然，如果需要，您也可以从应用程序代码中执行此操作。

在CSS中使用数据URL (Using data URLs in CSS)

If you want the same image as a repeating CSS background, you can use it like this:

如果您想要相同的图像作为重复CSS背景，则可以这样使用它：

<div id="data-uri-test"></div>
<style type="text/css">
#data-uri-test {
  width: 20px;
  height: 20px;
  background-image: url("https://i-blog.csdnimg.cn/blog_migrate/efa62c41b106cb1d7cf65b4ef5340071.png");
}
</style>

Where the gist of it really boils down to the same:

它的要旨实际上可以归结为相同之处：

background-image: url("https://img-blog.csdnimg.cn/2022010702312076744.png");

灯，相机... IE！(Lights, camera... IE!)

Everybody's favourite part of every technique... IE support. The thing is IE8 supports data URIs. Earlier IEs do not. But, there is a solution involving MHTML, which I'll describe in a follow-up post, since this one turn out kinda longish.

每种技术中每个人最喜欢的部分... IE支持。 IE8支持数据URI。 早期的IE不会。 但是，有一种涉及MHTML的解决方案，我将在后续文章中介绍，因为这种解决方案有点长。

For the impatient and Russian-speaking among you - click here.

如果您不耐烦且说俄语，请单击此处。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/data-urls-what-are-they-and-how-to-use/