在HTML中设置新的预呈现或预取的正确方法是什么?

wei*_*lou 11 firefox html5 google-chrome prefetch prerender

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<link rel="prefetch" href="https://www.apple.com/">
<link rel="prerender" href="https://www.apple.com/">
<script>
    document.addEventListener('click', function () {
        // Prerendering https://www.apple.com/ipad on Chrome.
        // ...

        // Prefetching https://www.apple.com/ipad on Firefox.
        // ...
    }, false);
</script>
Run Code Online (Sandbox Code Playgroud)

打开页面时,https ://www.apple.com/已预呈现并在不同的浏览器上预取.单击文档后,我希望预呈现并预取其他页面,https://www.apple.com/ipad.

看来我们有两种方法可供选择.我们可以替换当前2个link元素中的URL .或者我们可以在link元素中插入2个新元素head.

在HTML中设置新的预渲染的正确方法是什么?

在HTML中设置新预取的正确方法是什么?

我尝试将Chrome中的prerender link元素的URL从https://www.apple.com/替换为https://www.apple.com/ipad.我打开Chrome的任务管理器,发现https://www.apple.com/ipad没有预先进行预先处理.唯一预呈现的页面仍然是https://www.apple.com/.所以看来这种方法不起作用?

rst*_*use 15

<link rel="prefetch">实际上是HTML 5规范的一部分.

<link rel="prerender">似乎是谷歌正在做自己的事情.

贾斯汀是不正确的.你确实需要prefetch和prerender(或者至少是一个可以输出两者的polyfill),因为FF支持预取,Chrome支持prerender.

  • 最好的方法是将两者结合起来,例如`<link rel ="prefetch prerender"href ="http://example.com/">`? (6认同)

Abd*_*ady 5

首先,您对prefetchprerender用法之间的混淆感到有些困惑。它们的用法应如下所示:

prefetch 用法:

它应根据官方HTML5规范用于获取和缓存资源,以供以后的用户导航使用(即,预取要在页面中使用的css文件,而该文件很可能由用户在其未来的导航中使用)。在Chrome,Firefox和IE中受支持

prerender 用法:

它应用于预渲染用户很可能在其即将到来的导航中导航到该页面的完整页面(即像在用户很可能单击“下一篇文章”按钮时预渲染下一篇文章一样)。仅在Chrome和IE中受支持


回到您的问题,您可以link根据实际需要添加任意数量的浏览器提示(即,就像您使用的两个一样),只是不要滥用它们,因为它们会占用大量资源。

因此,您可以在页面生成时注入提示(如您所做的那样),也可以在运行时使用如下的javascript 注入提示:

var hint = document.createElement("link");
hint.setAttribute("rel", "prerender");
hint.setAttribute("href", "https://www.apple.com/ipad");

document.getElementsByTagName("head")[0].appendChild(hint);
Run Code Online (Sandbox Code Playgroud)

要更好地了解您可以使用所有"pre-"糖果做什么,请参阅google的精彩演讲