悬停时预取预取预存器多个页面

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的预呈现/预取，或者甚至从缓存中删除它吗？还是因为它在缓存中被调用了？

而且，在哪里可以进行测试？

*因为预渲染是一项先进的实验功能，错误触发可能会导致用户的体验下降，包括增加带宽使用、其他链接加载速度较慢以及内容稍显陈旧。如果您对用户下一次访问哪个页面有很高的信心，并且您确实为您的用户提供了附加价值，那么您应该考虑触发预录制。

Answer 1

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

要测试它，可以使用F12弹出您的开发工具，打开“网络”选项卡并检查“状态”列。如果它是304 (没有修改)，它来自缓存。

Answer 2

Chrome/IE/Edge允许每个窗口预录制一页(请注意，它不是一个选项卡)，这意味着第二个预录制提示被忽略。因此，您必须更新href属性，以便告诉浏览器必须预先录制另一个页面。当href属性被更改时，Chrome会删除先前预先录制的页面，看起来IE11和Edge的行为方式相同，但很难验证。为了查看Chrome中预先记录的内容，您可以访问chrome://net-internals/#prerender。请注意，当开发工具打开时，Chrome/IE/Edge会忽略预录制的页面，他们会从头开始加载它。

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

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