Question

看看这张幻灯片：

http://www.jungledragon.com/all/slideshow/promoted

它加载了一个大图像，在底部有9个缩略图图像，当您切换拇指图标按钮时可以看到它们。

作为加快此幻灯片演示的测试，我包括每个拇指的大版本的链接预取语句：

    <link rel="prefetch" [large image url 1 here]" />
    <link rel="prefetch" [large image url 2 here]" />
    <link rel="prefetch" [large image url 3 here]" />
    <link rel="prefetch" [large image url 4 here]" />
    <link rel="prefetch" [large image url 5 here]" />
    <link rel="prefetch" [large image url 6 here]" />
    <link rel="prefetch" [large image url 7 here]" />
    <link rel="prefetch" [large image url 8 here]" />
    <link rel="prefetch" [large image url 9 here]" />

您将在页面源中找到上述内容。这个想法是预先加载当前批次的所有大版本（9个图像），以便当用户浏览幻灯片时，大图像通常会立即出现。

实施此功能后，我一直在测试效果。测试说明很简单：

访问幻灯片链接
等待几秒钟（允许预加载）
移动到下一张图像几次。如果这几乎立即起作用，则预取是成功的。如果图像加载需要2-3秒，则表示失败。

或者，您也可以打开浏览器的检查器窗口，网络选项卡，并查看从缓存中预加载检索。请注意，如果多次执行此测试，则需要每次都清除缓存。

Chrome结果

Chrome中的结果非常壮观。预取提示被积极地拾取。它和它一样好。

Firefox结果

Firefox预取的次数较少，而且速度较慢。不过，至少它确实预取，并且它可以工作。

IE11结果

IE11声称支持资源预取，但它没有效果。在Windows 8.1 / IE11中，没有一个图像立即被加载，它似乎没有任何东西，也没有在导航幻灯片之前等待很长时间。在IE的开发工具中，我可以确认网络选项卡没有显示预取活动。

我后来才知道预取不能与dev工具打开，但即使关闭也没有预取，我可以从响应时间看到。

有关为什么这适用于Chrome和Firefox，但不适用于IE11的任何想法？应该得到很好的支持，但我无法让它发挥作用。这是一个跨域抓取，HTTP，而不是HTTP，但跨域预取应该按照规范工作。

Answer 1

我查看了您提供的链接，我认为该问题是链接元素的不寻常和（可能）无效放置。

Microsoft州 -

link元素只能在head标签中使用。

在MSDN documentation内。

Mozilla Developer Network州 -

允许的父元素任何接受元数据元素的元素

这符合进一步定义元数据内容的official specification -

元数据内容是用于设置其余内容的表示或行为的内容，或用于设置文档与其他文档的关系，或传达其他“带外”信息的内容。

基本链接元noscript脚本样式模板标题

页眉可以包含元数据内容，而正文只能接受切片和流内容。

Answer 2

只是想补充一点，我发现如果使用IE11 / Edge通过visual studio（使用443或80以外的任何其他端口）运行您的站点，public class RomanNumber{ private String number; public RomanNumber (String number){ validateState(number); this.number = number; } public int convertToInteger () { int decimal = 0; int lastNumber = 0; number = number.toUpperCase(); for (int x = number.length() - 1; x >= 0; x--) { char convertNumber = number.charAt(x); switch (convertNumber) { case 'M': decimal = processDecimal(1000, lastNumber, decimal); lastNumber = 1000; break; case 'D': decimal = processDecimal(500, lastNumber, decimal); lastNumber = 500; break; case 'C': decimal = processDecimal(100, lastNumber, decimal); lastNumber = 100; break; case 'L': decimal = processDecimal(50, lastNumber, decimal); lastNumber = 50; break; case 'X': decimal = processDecimal(10, lastNumber, decimal); lastNumber = 10; break; case 'V': decimal = processDecimal(5, lastNumber, decimal); lastNumber = 5; break; case 'I': decimal = processDecimal(1, lastNumber, decimal); lastNumber = 1; break; } } return decimal; } static int processDecimal(int decimal, int lastNumber, int lastDecimal) { if (lastNumber > decimal) { return lastDecimal - decimal; } else { return lastDecimal + decimal; } } private void validateState(String number){ if (number == null) throw new IllegalArgumentException("Null argument"); if (number.isEmpty()) throw new IllegalArgumentException("Empty string"); if (!number.matches("^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$")) throw new IllegalArgumentException("Invalid Roman number"); } @Override public boolean equals(Object obj){ if ((obj instanceof RomanNumber)) { RomanNumber decimal = (RomanNumber)obj; if (number.equals(decimal.number)) { return true; } else { return false; } } else { return false; } } public int hashCode(){ return number.hashCode(); } }将无效。 Chrome工作正常，我试图确定为什么ie / edge没有工作。我唯一能想到的是港口。所以我发布到我们的Web服务器，即/ edge开始工作。我会假设同样的事情适用于prerender，但我还没有尝试过。

为什么资源预取在IE11中不起作用？

2 个答案: