为什么IE会在兼容模式之外反复发送图像的GET请求？

Question

我正在解决ASP Web应用程序的问题，该问题仅在兼容性视图中出现在Internet Explorer中。在兼容性视图中，它工作正常，它也适用于Firefox和Chrome。看起来页面加载速度很慢，但在开发人员工具的网络选项卡中，我可以看到它正在执行数千个特定图像文件的GET请求，这些请求都会成功返回。我无法想象为什么会发生这种情况。

以下是网络标签的屏幕截图，以便您了解我的意思。在此示例中，IE为同一文件发出了超过6,000个成功的GET请求。

编辑：由于@pherris在评论中询问，因此图片在CSS中被引用为按钮的background-image属性（background-image: url(../images/btn_background.gif);）。

编辑2：所以我想出了请求数量的来源。该页面显示一个包含2054行数据的网格。每行包含三个按钮以及实际数据。每个按钮使用上面的CSS加载btn_background.gif图像。因此，自2054 * 3 = 6,162以来，这解释了该图像的约6,000个请求。但是，为什么IE会多次请求相同的文件而不是简单地请求一次？这仅在不使用兼容性视图时在IE中发生。它在Chrome和Firefox中运行良好。

Answer 1

我不确定回答我自己问题的礼节，但我找到了问题的原因。按钮上有另一个CSS属性导致请求发生：

/* The -ms-filter fits the image for IE8. */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/btn_background.gif', sizingMethod='scale')";

我不熟悉-ms-filter，但我做了一些谷歌搜索，这是一个不推荐使用的MS特定CSS属性。我发现它是因为我正在寻找btn_background.gif的所有引用，所以我可以用@pherris建议的数据URI方案替换它们，我看到它也在这个属性中被引用。我评论了这一点，果然，页面现在完美无缺。我甚至在其上启动了一个带有IE8的虚拟机并在那里进行了测试，即使评论表明此属性用于IE8兼容性，也没有任何问题。

Answer 2

您可以查看与图像一起发回的标题，并对您正在使用的特定IE版本进行故障排除，但此时我建议只需在CSS中对base64进行编码。这将避免甚至一个http请求（对于图像），您可以完全在客户端上进行更改。

CSS会改变为类似的东西（字符串是编码图像）：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==);

要对图像进行base64编码，您可以使用在线转换工具：

http://webcodertools.com/imagetobase64converter