12 
<!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>

打开页面时，https ://www.apple.com/ 会在不同的浏览器上进行预渲染和预取。单击文档时，我希望预渲染和预取另一个页面https://www.apple.com/ipad。

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

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

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

我试图在 Chrome 上将 prerenderlink元素的 URL 从https://www.apple.com/替换为https://www.apple.com/ipad。我打开了 Chrome 的任务管理器，发现https://www.apple.com/ipad没有被预先设置。唯一的预渲染页面仍然是https://www.apple.com/。所以看来这种方法行不通？

4

3 回答 3

17

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

<link rel="prerender">看来是谷歌在做自己的事情。

贾斯汀是不正确的。您确实需要 prefetch 和 prerender （或至少一个将同时输出两者的 polyfill），因为FF 支持 prefetch而Chrome 支持 prerender。

于 2013-07-02T15:11:23.233 回答
5

首先，您对prefetch&prerender用法之间的混合有点困惑。它们的用法应该是这样的：

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);

为了更好地了解您可以使用所有"pre-"好东西做什么，请参阅 google 的精彩演示。

于 2015-08-06T01:34:07.537 回答
1

1）您不需要同时使用预取和预渲染链接，您只需要预渲染。预渲染链接将加载预取所做的一切，等等。

2) 要回答您的问题，请使用方法 2 并使用 javascript 插入另一个预渲染链接。一些东西链接这个：

<script>
var myHead = document.getElementsByTagName('head')[0];
var myLink = document.createElement('link');
myLink.setAttribute('rel', 'prerender');
myLink.setAttribute('href', 'http://apple.com/ipad');
myHead.appendChild(myLink);
</script>

或者，如果您使用 jQuery：

$("head").append('<link rel="prerender" href="http://apple.com/ipad">');
于 2013-06-17T20:47:31.087 回答