Question

<!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个元素中的网址。或者我们可以在link元素中插入2个新的head元素。

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

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

我尝试在Chrome上将prerender link元素的网址从https://www.apple.com/替换为https://www.apple.com/ipad。我打开了Chrome的任务管理器，发现https://www.apple.com/ipad没有预先提交。唯一预呈现的页面仍为https://www.apple.com/。所以看来这种方法不起作用？

Answer 1

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

<link rel="prerender">似乎是Google doing their own thing。

Justin不正确。您确实需要prefetch和prerender（或至少一个将输出两者的polyfill）作为FF supports prefetch和Chrome supports prerender。

Answer 2

首先，你让我对prefetch＆amp;之间的混合感到困惑。 prerender用法。他们的用法应该是这样的：

prefetch用法：

它应该用于获取和缓存资源，以便根据official HTML5 spec进行后续用户导航（即预取一个css文件，该文件将在用户很可能在其即将推出的导航中使用的页面中使用）。 支持Chrome，Firefox和IE

prerender用法：

它应该用于预呈现用户很可能在其即将到来的导航中导航到它的完整页面（即，像预呈现用户将很可能点击“下一篇文章”按钮的下一篇文章）。 仅在Chrome和＆amp ;;中支持IE

回到您的问题，您可以根据实际需要添加浏览器提示（例如您使用的两个link），只是不要滥用它们，因为它们是资源-重。

因此，您可以在生成页面时注入提示（就像您所做的那样），或者您可以使用以下命令在运行时中注入它们：

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

document.getElementsByTagName("head")[0].appendChild(hint);

为了更好地了解您可以对所有"pre-"条款做些什么，请参阅此精彩presentation by google。

Answer 3

1）您不需要同时使用预取和预渲染链接，只需要预渲染。预呈现链接将加载预取功能，等等。

2）要回答您的问题，请使用方法2并使用javascript插入另一个prerender链接。有点链接：

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

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

3 个答案: