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

Question

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

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

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

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

但是，如果您在IE11中重复，那么图像总是被下载。它似乎完全忽略了缓存。

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

WebGl只是忽略IE 11中的图像缓存吗？周围的工作是什么？

提前谢谢。戴夫A

Answer 1

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

为了像描述的那样进行缓存，您需要准备好三件事；

1. 服务器需要在对网页请求的响应中发送缓存控制最大时长(或类似值)。

HTTP/1.1200OK缓存-控制:最大值-年龄=1296000内容-类型: text/html

1. 服务器需要在对图像请求的响应中发送缓存控制最大时长(或类似值)。

HTTP/1.1 200确定接受-范围:字节缓存-控制:最大-年龄=1296000内容-类型:图像/jpeg

1. 这一行必须从javascript中注释掉。

THREE.ImageUtils.crossOrigin =‘匿名’；

最后一行是给三个JS (和WebGL)的消息，允许使用来自其他web服务器的图像。在我的例子中，我想使用CDN来服务大图像。因此，这意味着CDN实际上不能与三个JS一起使用；您可以使用它们，只要每次请求页面时都重新下载图像，这就违背了缓存的目的。

用jsFiddle演示此解决方案的困难之处在于，当jsFiddle页面被请求时，它不会发出‘缓存控制’(这是正确的)，所以在jsFiddle中运行时，它总是会重新下载映像。

Answer 2

通过查看源代码，您最终可以在https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js上看到它这样做：

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

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