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

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的结果是壮观。预取提示被积极挑选。它和它一样好。

火狐导致

Firefox的预取比较积极和更慢。尽管如此，至少它可以预取，并且它可以工作。

IE11导致

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

我后来得知，预取不能在开发工具打开的情况下工作，但即使在关闭时也没有预取正在进行，我可以从响应时间中看到。

任何想法为什么这适用于Chrome和Firefox，但不适用于IE11？它应该得到很好的支持，但我无法让它工作。这是跨域提取，不论是HTTP还是HTTP，跨域预取都应该按照规范工作。

来源

2014-08-29 Ferdy

您可以使用Telerik出色的Fiddler工具查看下载的图像，而无需使用开发工具中的“Network”选项卡。 http://www.telerik.com/fiddler – pwdst 2014-08-29 11:24:36

查看MSDN - “IE11最多支持十（10）个预取请求，其他请求被忽略。” http://msdn.microsoft.com/en-gb/library/ie/dn265039(v=vs.85).aspx - 在图像之前是否有任何请求（样式表，脚本等）？ – pwdst 2014-08-29 11:28:15

@pwdst是的，但不是预取请求。 – Ferdy 2014-08-29 12:07:12

我看过你提供的链接，我相信问题是链接元素的不寻常和（可能）无效放置。

微软述明

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

在他们的MSDN documentation之内。

Mozilla Developer Network国有

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

此吻合与official specification进一步定义的元数据内容 -

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

基连接元无脚本的脚本风格的模板标题

页头是能够包含元数据内容，而身体只能接受切片和流内容。

来源

2014-08-29 12:22:06 pwdst

谢谢，刚刚实施并测试了这个，实际上这样做确实有效！ – Ferdy 2014-08-29 12:59:13

像这样的东西应该总是在HEAD元素中。另一个例子是dns-prefetch。你希望这些后台任务尽可能早地运行。您还需要考虑，这些请求是否阻止该域上的其他请求？记住一个浏览器将一次打开（通常）6个连接到同一个域。我不知道预取是否会影响那个＃或不。 – 2014-08-29 13:44:44

@ChrisLove预取和预渲染利用浏览器**空闲**时间来下载资源，这是用户在不久的将来“极有可能” - 特别是下一个请求。请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ。在dns-prefetch的情况下，MDN将其描述为与内容下载“并行”，但将用于用户的DNS服务器，而不是Web服务器。 DNS查找的流量实际上非常小，预取的优点是可以减轻查找的相对较高延迟。 – pwdst 2014-08-29 14:06:25

只是想补充一点，我发现prerender如果使用IE11/Edge通过Visual Studio（使用443或80以外的任何其他端口）运行您的站点将不起作用。铬工作正常，我试图确定为什么ie /边缘不工作。我唯一能想到的就是港口。所以我发布到我们的Web服务器和IE /边缘开始工作。我会假设同样的事情会适用于prefetch，但我还没有尝试过。

来源

2016-08-16 15:12:05 coding4fun

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

回答

相关问题