在 IE 6 和 7 中为图像使用数据 URI

Question

我目前正在开发一个网络应用程序。它包含在服务器中动态生成的图像（因此在请求后需要一些时间才能出现）然后抛出。所以我想我会使用HTML5 local-storage API 来缓存图像，以便在后续请求同一图像时，可以立即提供服务。为此，我计划使用图像的 base64 编码作为源，而不是使用源 URL。

JS 现在不会从服务器请求图像，而是首先检查该图像数据当前是否在本地存储中可用（例如，具有属性 123 的图像存储在本地存储中 123 作为键，base 64 编码作为值）。如果是，那么只需使用从那里获得的值更改图像的源。否则请求服务器发送编码，收到后保存在缓存中。

问题是IE6 和IE7 不支持。如here 所述，有一种解决方法，但这涉及到一个服务器端CSS 文件来包含图像数据。由于图像将即时生成，这不符合我们的目的。我还能如何在IE6 和IE7 中实现这一点？

Answer 1

或者，不要尝试在客户端缓存任何内容。在服务器端缓存生成的图像并像平常一样托管这些图像。您不需要本地存储并将其缓存在客户端。

换句话说：

1. 使用您的脚本生成图像服务器端
2. 将其缓存在/httpdocs/cache/images/whatever-hash.jpg之类的地方
3. 在您的文档中提供图像<img src="/cache/images/whatever-hash.jpg">

如果生成图像需要 5 秒，并且您有 120 个并发用户请求 100 个唯一页面，并且您的服务器脚本在任何给定时间只能处理 4 个线程 5 秒 x (120 /4) / 60 = 2.5 分钟的服务器处理时间，然后队列的图像中的最后一个用户得到服务并将数据存储在本地存储中。

如果所有用户都请求相同的确切页面，则花费相同的时间。每个用户缓存并没有真正的好处，因为每个用户都必须要求服务器生成他们自己的图像。此外，由于 localstorage 经常会失效，用户使用的次数越多，他们会觉得用户体验相当缓慢，我认为您的应用程序会保释。

在服务器上缓存文件将有更多的好处恕我直言。当然它会占用服务器存储空间，但现在它相当便宜，您可以使用云 CDN（例如 www.maxcdn.com）来应对负载。

如果您仍然决定需要缓存客户端，因为 IE6/IE7 不支持本地存储或数据 URI，请查看以下内容

• 您需要一个用于 IE6/IE7 的 Web Storage shim，https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills 上有一个列表
• 您需要一种方法将生成的图像临时存储为 blob 并将其粘贴到存储中。示例：http://robnyman.github.com/html5demos/localstorage/
• 您还可以使用 Canvas Shim 和 toBlob shim：https://github.com/eligrey/canvas-toBlob.js/

Answer 2

设置标题以通知浏览器资源已缓存：

header("Last-Modified: " . date("D, d M Y H:i:s", getlastmod()));

在 PHP 中 或

Response.Cache.SetLastModified(DateTime.Now);

在.net中

这样浏览器会缓存资源。