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

【问题标题】：What's the right method to set a new prerender or prefetch in HTML?在 HTML 中设置新的预渲染或预取的正确方法是什么？
【发布时间】：2017-06-23 23:03:11
【问题描述】：

<!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 上将预渲染 link 元素的 URL 从 https://www.apple.com/ 替换为 https://www.apple.com/ipad。我打开了 Chrome 的任务管理器，发现 https://www.apple.com/ipad 没有被预定义。唯一的预渲染页面仍然是https://www.apple.com/。所以看来这个方法行不通？

【问题讨论】：

标签： html google-chrome firefox prefetch prerender

【解决方案1】：

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

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

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

【讨论】：

IE11 现在支持两者。
最好的方法是将两者结合起来，例如，<link rel="prefetch prerender" href="http://example.com/">?

【解决方案2】：

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

prefetch 用法：

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

prerender 用法：

它应该用于预呈现一个完整的页面，用户很可能会在接下来的导航中导航到该页面（例如预呈现用户很可能会点击“下一篇文章”按钮的下一篇文章）。 仅在 Chrome 和 IE 中受支持。

回到您的问题，您可以根据需要添加浏览器提示（即像您使用的两个 link），只是不要滥用它们，因为它们会占用大量资源.

因此，您可以在生成页面时注入提示（就像您所做的那样），或者您可以在 runtime 使用这样的 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-" 好东西做什么，请参阅这篇精彩的 presentation by google。

【讨论】：