悬停时预取预呈现多个页面

Question

我有以下代码在悬停时预取和预呈现*特定的 links，我的问题是，我是否需要每次 add 一个新的 link，或者我 change href?

$(".prerender").on("mouseover", function() {
        var link = $(this).attr("href"),
            prerenderLink = $("#prerenderLink");
        if (prerenderLink.length) {
            if (prerenderLink.attr("href") === link) return;
            prerenderLink.attr("href", link);
        } else {
            $('<link id="prerenderLink" rel="prefetch prerender" href="' + link + '" />').appendTo("body");
        }
    });

是否会删除、更改 href 取消先前定义的 href 的 pre-rendering/pre-fetching，甚至将其从缓存中删除？或者因为一旦它留在缓存中就被调用了？

还有，这个在哪里可以测试？

*因为预渲染是一项高级实验性功能，错误触发它可能会导致用户体验下降，包括带宽使用增加、其他 link 的加载速度变慢以及略显陈旧内容。如果您对用户接下来将访问的页面有很高的信心，并且您确实在为用户提供附加值，那么您应该只考虑触发预渲染。

Answer 1

更改 href 是否会取消网络请求可能取决于浏览器，是否将其从缓存中删除可能取决于浏览器和用户设置。

要测试它，请使用 F12 弹出您的开发工具，打开网络选项卡并检查状态栏。如果它是 304（未修改）它来自缓存。

Answer 2

Chrome/IE/Edge 允许每个 window 预呈现一页（请注意，它不是选项卡），这意味着第二个预呈现提示将被忽略。因此，您必须更新 href 属性以告知浏览器必须预呈现另一个页面。当 href 属性更改时，Chrome 关闭之前预渲染的页面，看起来 IE11 和 Edge 的行为方式相同，但很难验证。要查看 Chrome 中预呈现的内容，您可以访问 chrome://net-internals/#prerender。请注意，当打开开发工具时，Chrome/IE/Edge 会忽略预渲染页面，他们将从头开始加载它。

总的来说，悬停解决方案并不是最好的解决方案。正如您所指出的，您的服务器将获得额外的负载，因此，最好在添加预渲染提示之前获得足够的信心。此外，浏览器需要一些时间来加载页面。使用悬停解决方案，浏览器可能没有足够的时间进行预渲染。

我也对这个话题感兴趣。几个月前，我启动了一个开源项目 (https://github.com/sirko-io/engine)，该项目跟踪用户如何浏览网站并添加 link 标记以提示浏览器。如果需要，您可以在您的网站上试用。

悬停时预取预呈现多个页面

prefetch prerender multiple pages on hover

html

javascript

prefetch

prerender