IE 11 不缓存 webgl 图像 - 为什么？答案

【问题标题】：IE 11 does not cache webgl images - why?IE 11 不缓存 webgl 图像 - 为什么？
【发布时间】：2015-10-28 12:33:04
【问题描述】：

我有一个 Three.JS 驱动的 WebGL 示例，位于

 material.map = THREE.ImageUtils.loadTexture('/images/earthmap2k.jpg');

如果您使用 Chrome，您会看到当请求大图像时，该图像的缓存被正确设置为“max-age=1296000”。如果您再次“播放”JSFiddle，则不会再次下载图像 - 正如预期的那样。

但是，如果您在 IE 11 中重复，则始终会下载图像。它似乎完全忽略了缓存。

对于一个大文件，这可能是一个真正的问题，因为当您点击一个指向不同页面但显示相同类型动画的超链接时，需要再次下载图像，从而导致糟糕的用户体验。

WebGl 会忽略 IE 11 中的图像缓存吗？解决方法是什么？

提前致谢。戴夫A

【问题讨论】：

您使用的是 r54，它非常古老。请使用更新版本的three.js（您必须手动将其添加到小提琴中）。此外，检查正在发送的标头会发送“缓存控制：无缓存；”所以不使用缓存是完全有效的。较新版本的 three.js 在这里的行为可能会有所不同。
谢谢。我已经将 jsfiddle 更新到了 three.js 的最新版本，但没有任何区别。 jsfiddle.net/dja1/c3hcavnj/2 我猜你指的是 HTTP 标头 "Pragma: no-cache" ？如何让 three.js 使用不同的东西？
Three.js 不发送标头。提供图像的 Web 服务器发送它们。如果你想要不同的缓存头，你需要配置你的服务器。

【解决方案1】：

var image = document.createElement( 'img' );

使用这样的图像元素不会提供对缓存的任何控制。在该文件中，您还可以看到它确实在内部缓存，但这对重新加载没有帮助。因此，简而言之，您在这里看到的将是一些 IE11 特定的行为，它决定每次都重新加载图像。

【讨论】：

除了“不要使用 IE”，你还能想到什么变通办法吗？ Three.js 可以真正受益于在这方面进行更改。
在服务器上发送不同的标头可能会完成这项工作。除此之外，您可以在浏览器中加载图像的操作是有限的，这完全取决于浏览器，而不受 JavaScript 的控制。这不是 three.js 的错……见 .e.g. stackoverflow.com/questions/5017454/…（更多的是关于防止缓存）。
您所说的在技术上是不正确的。请参阅此 jsfiddle jsfiddle.net/dja1/zypvfx2n，它执行 createElement('img') 并执行完全缓存。这个故事还有更多。我将进一步研究并回馈我的发现。
它没有使用相同的图像（甚至不是相同的服务器），虽然我现在没有时间比较这些服务器响应的差异，但我很确定会有显着那里的差异，导致 IE11 缓存一个而不是另一个。

【解决方案2】：

我现在已经研究了这个主题，可以提供一些见解。

为了使缓存如所述发生，您需要准备好三件事；

HTTP/1.1 200 OK
Cache-Control: max-age=1296000
Content-Type: text/html

HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=1296000
Content-Type: image/jpeg

THREE.ImageUtils.crossOrigin = 'anonymous';

最后一行是发给 Three JS（和 WebGL）的消息，允许使用来自其他 Web 服务器的图像。就我而言，我想使用 CDN 来提供大图像。所以这意味着 CDN 被有效地排除在三个 JS 中；你可以使用它们，它只是每次请求页面时都会重新下载图像，这违背了缓存的目的。

用 jsFiddle 演示这个解决方案的难点在于它不会在请求 jsFiddle 页面时发出“缓存控制”（这是正确的），因此在 jsFiddle 中运行时它总是会重新下载图像.

【讨论】：