uri: lb://_数据URI，MHTML和IE7 / Win7 / Vista蓝调

uri: lb://

2010 update: Lo, the Web Performance Advent Calendar hath moved

2010年更新： Lo， Web Performance Advent Calendar已移动

Dec 7 This is the seventh in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles.

12月7日，这是我的2009年性能出现日历实验一部分的系列性能文章中的第七篇。请继续关注下一篇文章。

UPDATE: While this post is an interesting study, the problem it solves turns out to be much simpler. The details are here. In resume: you need a closing separator and it all works fine in IE7/Vista/Win7

更新：虽然这篇文章是一个有趣的研究，但事实证明它解决的问题要简单得多。详细信息在这里。在简历中：您需要一个封闭的分隔符，并且在IE7 / Vista / Win7中都可以正常工作

Let's start this post as a dialog:

让我们以对话框开始这篇文章：

- Data URIs are a way to embed the base64-encoded content of images inside HTML and CSS. Inlining images in markup or stylesheets helps you save precious HTTP requests. It's an alternative to CSS sprites. - BUT! IE6 and IE7 don't support data URIs - Yes, for them you can inline the images using MHTML - BUT! Looks like IE7 on Vista and IE7 on Win7 have problems with MHTML - [Sigh...] For those browser/OS combos there's a solution too.

-数据URI是一种在HTML和CSS中嵌入图像的base64编码内容的方法。在标记或样式表中内联图像可以帮助您节省宝贵的HTTP请求。它是CSS Sprite的替代方法。 -但是！ IE6和IE7不支持数据URI-是的，对于它们，您可以使用MHTML内联图像-但是！看起来Vista上的IE7和Win7上的IE7都存在MHTML问题-[叹...]对于那些浏览器/ OS组合，也有解决方案。

I'll quickly go over what are data URIs and how MHTML addresses IE6 and IE7. If you're familiar with these, feel free to skip down to the Vista blues part.

我将快速介绍什么是数据URI，以及MHTML如何寻址IE6和IE7。如果您熟悉这些内容，请随时跳至Vista蓝调部分。

数据URI (Data URIs)

Here's how to use data URIs in your pages:

以下是在页面中使用数据URI的方法：

take an image:

拍摄图片：

Use PHP to read this image's binary content and encode it using base64 encoding:

使用PHP读取此图像的二进制内容，并使用base64编码对其进行编码：

$ php -r "echo base64_encode(file_get_contents('horoscopes.png'));"
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADAFBMVEX///8mPnru9...
...more scary stuff goes here...
dajNGGzlDAAAAABJRU5ErkJggg==

To use this image in CSS, paste the encoded image content in the stylesheet following this syntax:

要在CSS中使用此图像，请按照以下语法将编码后的图像内容粘贴到样式表中：
```
.horoscopes {
background-image: url("https://img-blog.csdnimg.cn/2022010611501355564.png");
}
```
Note: the trailing == is part of the image content it's not part of the syntax

注意：结尾的==是图片内容的一部分，不是语法的一部分
Alternatively if you want to use this image in the HTML, you can go like:

另外，如果您想在HTML中使用此图片，则可以执行以下操作：
```
<img src="https://img-blog.csdnimg.cn/2022010611501355564.png" />
```

And that's about it for data URIs, it's quite simple actually.

数据URI就是这样，实际上很简单。

野外的数据URI (Data URIs in the wild)

To see real-life, high-traffic sites using data URIs look no further than your favorite search engines.

要查看使用数据URI的现实生活，高流量站点，您最喜欢的搜索引擎就是这样。

Yahoo! Search using data URI in CSS for a button background:

雅虎！使用CSS中的数据URI搜索按钮背景：

Google Search using data URI in an IMG tag for a video thumb:

使用IMG标签中的数据URI进行视频拇指的Google搜索：

Base64编码的文件大小 (Base64-encoded filesizes)

The base64 encoding adds about 33% to the filesize. But, then you gzip the result, the compression brings the size back to the original. Plus or minus. Interestingly enough, sometimes after base64 and gzip, the result is smaller than the original. But don't count on that.

base64编码将文件大小增加了约33％ 。但是，然后对结果进行gzip处理，压缩将大小恢复为原始大小。加号或减号。有趣的是，有时在base64和gzip之后，结果要比原始结果小。但是不要指望。

Theoretically also when you base64 encode a bunch of images and inline them in the same CSS or HTML, you'll have a larger string to compress, so increasing the chance of repetitions and compressing better. (Todo: test this assumption)

从理论上讲，当您对一堆图像进行base64编码并将其内联到相同CSS或HTML中时，您将拥有更大的字符串可以进行压缩，因此增加了重复的机会并可以更好地进行压缩。 (Todo：检验这个假设)

In any event, the benefit of reducing HTTP requests will likely greatly outweigh any fluctuation in the file size.

无论如何，减少HTTP请求的好处可能会大大超过文件大小的任何波动。

MHTML (MHTML)

IE8 supports data URIs, but earlier IEs do not. For them you can use MHTML (Multipart HTML, blogged previously here)

IE8支持数据URI，但较早的IE不支持。对于他们，您可以使用MHTML( Multipart HTML ，以前在这里发布)

Continuing with the previous example, in order to display the horoscopes image in IE < 8 you can use a stylesheet like this:

继续前面的示例，为了在IE <8中显示星座图像，您可以使用如下样式表：

/*
Content-Type: multipart/related; boundary="_MY_BOUNDARY_SEPARATOR"
--_MY_BOUNDARY_SEPARATOR
Content-Location:horoscopes
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADAFBMVEX///8mPnru9....U5ErkJggg==
*/
.horoscopes{*background-image:url(mhtml:http://example.org/styles.css!horoscopes);}

A few notes on this example:

此示例的一些注意事项：

the image content is base64-encoded just like before
图像内容像以前一样是base64编码的
if you need more images, use your chosen separator prepended with --, in this case --_MY_BOUNDARY_SEPARATOR

如果需要更多图像，请使用以-- --_MY_BOUNDARY_SEPARATOR所选分隔符，在本例中为--_MY_BOUNDARY_SEPARATOR
Content-Location:horoscopes is how you give a name to the image in order to use it later

Content-Location:horoscopes是为图像命名的方式，以便以后使用
then later in your stylesheet you can reference the name in the stylesheet using http://url/styles.css!horoscopes

然后稍后在样式表中，您可以使用http://url/styles.css !horoscopes引用样式表中的名称
you need absolute URLs in the mhtml:http://.... part (that's retarded, hope I'm mistaken. Didn't work for me with relative URLs)

您需要在mhtml:http://....部分中使用绝对URL(这很困难，希望我弄错了。不适用于相对URL)
you can use a single CSS file to support both old IE as well as new browsers, but you'll have to repeat the image stream twice, probably a better approach is to use browser specific stylesheets
您可以使用单个CSS文件来支持旧版IE和新版浏览器，但是您必须重复两次图像流，也许更好的方法是使用特定于浏览器的样式表

For more examples of MHTML (which is also used for multipart email messages) check this and for a brilliant example of using one MHTML to embed images in HTML (not CSS), check Hedger's test page here (appears 404 at the moment of writing). For a tool to automate the dataURI-zation/MHTML-ization, be sure to check Nicholas Zakas' CSSEmbed

对于MHTML更多的例子(这也是用于多封电子邮件)检查这个和在HTML(不CSS)使用一个MHTML嵌入图像的光辉典范，检查这里Hedger来的测试页(出现404在写作的时刻) 。对于自动化dataURI-zation / MHTML-ization的工具，请务必检查Nicholas Zakas的CSSEmbed

Vista(和Win7)上IE7的问题 (The problem with IE7 on Vista (and Win7))

So far we have data URIs and MHTML fallback. Turns out we're not done yet, because IE7 on Vista and Windows 7 fails with the MHTML example. Two points:

到目前为止，我们已经有了数据URI和MHTML后备。事实证明我们还没有完成，因为Vista和Windows 7上的IE7在MHTML示例中失败了。两点：

IE8 is the default in Windows 7, but it comes with several IE7 modes (either by default or turned on by users when their favorite pages break). Compatibility view, ie7 mode, ie8 in ie7 mode, blah-blah, it's all pretty confusing, but all modes with the exception of IE8 in proper IE8 standards don't work with the MHTML
IE8是Windows 7中的默认设置，但它具有几种IE7模式(默认情况下或当用户喜欢的页面中断时由用户打开)。兼容性视图，即ie7模式，ie8在ie7模式下，等等，这一切都令人困惑，但是除适当的IE8标准中的IE8之外，所有模式均不适用于MHTML
I tested Windows 7 evaluation copy, but I have the bad, bad feeling that Windows 7 normal copy will be as broken when it comes to MHTML. I believe it has something to do with security, if anyone finds an article on MSDN, or anywhere, please share.
我测试了Windows 7评估版，但我感到Windows 7普通版在涉及MHTML时会坏掉，这让我很不好。我相信这与安全性有关，如果有人在MSDN上或任何地方找到文章，请分享。

The solution to the Vista problem is to split the CSS shown above (the one that uses MHTML) in two: one which contains the encoded images (the commented part) and a second one which only has the normal CSS selectors part.

解决Vista问题的方法是将上面显示CSS(使用MHTML的一个)分成两部分：一个包含编码图像(注释部分)，第二个仅包含普通CSS选择器部分。

In other words have something like:

换句话说，类似：

mhtml.txt:

mhtml.txt ：
```
Content-Type: multipart/related; boundary="_MY_BOUNDARY_SEPARATOR"
--_MY_BOUNDARY_SEPARATOR
Content-Location:horoscopes
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADAFBMVEX///8mPnru9....U5ErkJggg==
```
No need to use comments. Could be .txt, .css or anything you like. In my tests the content-type didn't matter - text/html, text/css, text/plain all worked

无需使用注释。可以是.txt，.css或任何您喜欢的名称。在我的测试中，内容类型并不重要-text / html，text / css，text / plain都可以
styles.css:

styles.css ：
```
.horoscopes{*background-image:url(mhtml:http://example.org/mhtml.txt!horoscopes);}
```
The normal CSS simply references the new MHTML file appending !identifier

普通CSS只是引用了附加了!identifier的新MHTML文件!identifier
in your HTML you don't need to reference the MHTML document, you just point your link tag to styles.css as usual and styles.css contains the reference to the MHTML doc

在您HTML中，您无需引用MHTML文档，只需照常将link标记指向styles.css ， styles.css包含对MHTML文档的引用

Time to celebrate? Almost.

是时候庆祝了？几乎。

Another ugly bug surfaces - this procedure outlined above works only once. Once the MHTML.txt is cached, it stops working. That means repeating visits to the page or other pages using the same mhtml. The effect also means hovering on the same page. Say you have two images - one normal and one mouse over, both in the same MHTML. The normal works and the hover breaks, mouseout breaks too. Insane, isn't it?

另一个丑陋的bug浮出水面-上面概述的此过程仅起作用一次。一旦MHTML.txt被缓存，它将停止工作。这意味着使用相同的mhtml重复访问该页面或其他页面。该效果还意味着将鼠标悬停在同一页面上。假设您在同一MHTML中有两张图片-一幅普通图像和一幅鼠标悬停。正常工作，悬停中断，mouseout也中断。疯了，不是吗？

There's a solution though - you should make the browser request the MHTML document every time. This is kind of backwards when it comes to performance optimization, where we want to cache everything. It's pretty unfortunate. The best you can do is avoid sending the MHTML every time, but only send a "not-modified" header. In order for this to work, the browser has to send If-Modified-Since or If-None-Match.

不过，有一个解决方案-您应该让浏览器每次都请求MHTML文档。就性能优化而言，这是一种倒退，我们要缓存所有内容。真不幸。最好的办法是避免每次都发送MHTML，而仅发送“未修改”标头。为了使其正常工作，浏览器必须发送If-Modified-Since或If-None-Match 。

So you can send your MHTML file with an ETag (yes, ETags can help sometimes ;)) Then the browser will send an If-None-Match and you can happily reply "304 Not Modified".

因此，您可以发送带有ETag MHTML文件(是的， ETags有时会有所帮助；))然后浏览器将发送If-None-Match，您可以愉快地回复“ 304 Not Modified”。

Sounds complicated? It sure is. And, remember, all this is only for IE7 (or any IE7 mode) on Vista and Windows 7. All other IEs on all other platforms work with the easy MHTML and IE8 works with data URIs.

听起来复杂吗？确实是。并且，请记住，所有这些仅适用于Vista和Windows 7上的IE7(或任何IE7模式)。所有其他平台上的所有其他IE都可以使用简单的MHTML，而IE8则可以使用数据URI。

Everything is a trade-off (see last night's post) and I can understand how you may think "That is one big tradeoff". There's always the option of serving normal images to the affected browser/os and just don't implement this optimization for them.

一切都是权衡(请参阅昨晚的帖子)，我可以理解您可能会认为“那是一个重大的权衡”。始终可以选择向受影响的浏览器/操作系统提供正常的图像，而不必对它们进行优化。

But it's good to know there is a solution.

但它是很好的了解有一个解决方案。

DataSprites类 (DataSprites class)

Let me offer this DataSprites PHP class I coded that takes care of all the scenarios. It takes a bunch of image filenames as input and produces:

让我提供我编写的DataSprites PHP类，它可以处理所有情况。它需要一堆图像文件名作为输入并产生：

a CSS containing data URIs for normal browsers (example output)

一个包含普通浏览器数据URICSS(示例输出)
an MTHML CSS fallback for IE6,7 (example output)

IE6,7的MTHML CSS后备(示例输出)
a CSS that refers to an additional MHTML for IE7 on Vista, Win7 (example output - css and mhtml). The MHTML in this case is sent out with an ETag (derived from the input image filenames) and consecutive requests with the same ETag return 304 Not Modified

CSS，它引用Vista，Win7上IE7上的其他MHTML(示例输出-css和mhtml )。在这种情况下，MHTML随ETag (从输入图像文件名派生)一起发送，并且具有相同ETag连续请求返回304 Not Modified

You can see a test page here and view the source code here. The directory listing is also available if you want to grab the images for testing.

您可以在此处查看测试页，并在此处查看源代码。如果您要获取图像进行测试，则也可以使用目录列表。

The perfect use case for such an approach is when you want to combine background images on the fly. When you would normally use CSS sprites, but you want to produce them dynamically at run time (maybe because you have too many combinations?).

这种方法的理想用例是当您想动态组合背景图像时。通常使用CSS Sprite时，但是您希望在运行时动态生成它们(可能是因为组合太多了？)。

I've tested this in Safari, Firefox, Opera, IE6, IE7 and IE8 (in all compat modes) on Vista and Windows 7 evaluation copy. If you find the test page is not working for you, please let me know.

我已经在Vista和Windows 7评估版的Safari，Firefox，Opera，IE6，IE7和IE8(在所有兼容模式下)中对此进行了测试。如果您发现测试页不适合您，请告诉我。

In this DataSprites class, I'm checking the problem OS looking for the strings "Windows NT 6" and "Windows NT 7" in the user agent string. My Win7 evaluation copy had "Windows NT 6.1" in the UA, so I may be a little forwards-aggressive with the check, but somehow I thought Win7 proper should have "Windows NT 7" in the UA string. And also that Win7 will suffer from the same issue as Vista and Windows 7 evaluation.

在此DataSprites类中，我正在检查问题操作系统，以在用户代理字符串中查找字符串“ Windows NT 6”和“ Windows NT 7”。我的Win7评估版副本在UA中具有“ Windows NT 6.1”，因此我对检查有点冒犯性，但是以某种方式我认为Win7应该在UA字符串中包含“ Windows NT 7”。而且Win7将遭受与Vista和Windows 7评估相同的问题。

UPDATE: Added a hover example.

更新：添加了一个悬停示例。

UPDATE 2: Recorded a screencast to demo the IE7/Vista experience

更新2：录制了演示IE7 / Vista体验的截屏视频

谢谢！(Thanks!)

Thanks for reading! Now you know all about data URIs, MHTML, and maybe a little too much about IE7/Vista's challenges