在鼠标悬停时预取/预渲染多个页面

Question

我有以下代码，它可以在鼠标悬停时预取和预渲染特定的链接。我的问题是，我需要每次添加一个新链接，还是只需要更改 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 的预渲染/预获取，甚至将其从缓存中删除？或者因为它被调用了一次，所以它会留在缓存中？

此外，这可以在哪里测试？

*由于预渲染是一项高级实验性功能，误触发可能会导致用户体验下降，包括增加带宽使用、其他链接加载变慢和内容稍有滞后。只有当您对用户下一步访问的页面非常有信心，并且确实为用户提供了附加价值时，才应考虑触发预渲染。

- adardesign

Answer 1

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

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

我也对这个主题很感兴趣。几个月前，我启动了一个开源项目(https://github.com/sirko-io/engine)，用于跟踪用户在网站上的导航，并添加链接标记以提示浏览器。如果您愿意，可以在您的网站上尝试它。

- Dmytro Nesteriuk

Answer 2

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

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

- dtanders