Rel PreRender/PreFetch，它执行 JS 吗？答案

【问题标题】：Rel PreRender/PreFetch, does it execute JS?Rel PreRender/PreFetch，它执行 JS 吗？
【发布时间】：2012-05-23 03:03:22
【问题描述】：

<!—Firefox Prefetching -->
<link rel="prefetch" href="http://www.example.com/page2.html">

<!—Chrome Prefetching -->
<link rel="prerender" href="http://www.example.com/page2.html">

如果我在页面上有 Javascript 进行预渲染/预取（例如 Google Analytics JS），预渲染/预取是否会在页面上执行 Javascript？或者它会延迟 JS 的任何执行，直到用户实际请求页面？

【问题讨论】：

刚刚做了一些研究并自己回答了这个问题，有趣的是，prefetch 和 prerender 的行为彼此完全不同。

标签： javascript preloading prefetch prerender

【解决方案1】：

我刚刚对此进行了更多研究：

Prefetch 将加载通常只是 HTML 页面的顶级资源

Prerender 也将获取子元素，并将执行 Javascript 代码。使用 Page Visibility API，我们可以确定加载页面的当前可见性状态。

所以答案是肯定的，只要用户在 Chrome 上并且正在使用 prerender，它就会执行 JS。此外，当前版本的 Google Analytics（分析）充分利用了 Page Visibility API，因此统计信息不会出现偏差，但很可能有很多代码由于未正确处理预呈现情况而导致统计信息出现偏差。

【讨论】：

实际上，它们是有目的的不同命令。 prefetch 可用于您想要预取的资源（脚本、图像、html 文件等），而 prerender 用于预呈现您（希望）知道极有可能被访问的完整页面接下来，很快，由您的用户。例如，可能是您论坛的登录页面，或类似的东西。 prefetch 受 chrome、ff、ie 和 edge 支持。 prerender 受chrome ie 和edge 支持。（尽管查看 caniuse.com 以获得最新支持...）
您是否有来自 Google 的官方消息称 Google Analytics 知道如何忽略预取命中？

【解决方案2】：

不，预取只是缓存文件，它不执行它包含的 javascript。

据我所知，analytics.js 在您请求时不会分析网站。它在执行 javascript 时有效。当浏览器预取（请求）analytics.js 文件时，并不意味着执行了 analytics.js 文件。因此，在用户实际请求页面之前，您网站的 Google Analytics（分析）数据不会受到预取方法的影响。

【讨论】：

【解决方案3】：

关于主题the spec 是沉默的，只是说：

prefetch 关键字表示抢先获取和缓存指定的资源可能是有益的，因为它是高度用户可能需要此资源。

由此我们可以说JS在预取页面中的执行是undefined。

浏览器供应商是否看到在预取页面中执行 JS 的好处取决于供应商。

【讨论】：

我刚刚发现 prefetch 只加载顶级元素，但是 prerender 会获取所有子元素并执行 JS。