IE 11 不缓存 webgl 图像——为什么？

IE 11 does not cache webgl images - why?

我在

找到了一个 Three.JS 强大的 WebGL 示例

http://jsfiddle.net/dja1/7xwrqnen/

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

如果您使用 Chrome，您会看到当请求大图像时，此图像的缓存已正确设置为 'max-age=1296000'。如果您再次 'Play' JSFiddle，图像不会再次下载 - 正如预期的那样。

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

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

WebGl 是否只是忽略了 IE 11 中的图像缓存？解决方法是什么？

提前致谢。 戴夫 A

查看源代码，您最终会在 https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js 处看到它：

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

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

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

为了按照描述的方式进行缓存，您需要做好三件事；

  1. 服务器需要在对网页请求的响应中发送 Cache-Control max-age（或类似的）。
HTTP/1.1 200 OK
Cache-Control: max-age=1296000
Content-Type: text/html
  1. 服务器需要在对图像请求的响应中发送 Cache-Control max-age（或类似的）
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=1296000
Content-Type: image/jpeg
  1. 这一行必须从 javascript.
    2. 中注释掉 
THREE.ImageUtils.crossOrigin = 'anonymous';

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

使用 jsFiddle 演示此解决方案的困难在于，它不会在请求 jsFiddle 页面时发出 'cache-control'（这是正确的），因此它总是会重新下载图像当 运行 在 jsFiddle 中时。