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

我有以下代码预取和预呈现悬停上的*特定链接， 我的问题是，我是否每次都需要添加一个新链接，或者更改

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");
        }
    });

$（.prerender”）.on（“鼠标悬停”，函数（）{
var link=$（this.attr（“href”），
预渲染链接=$（“#预渲染链接”）；
if（预渲染链接长度）{
if（prerenderLink.attr（“href”）==链接）返回；
prerenderLink.attr（“href”，链接）；
}否则{
$（''）。附于（“正文”）；
}
});

删除、更改

href

是否会取消对先前定义的

href

的预呈现/预取，甚至将其从缓存中删除？还是因为它在缓存中被调用

此外，在哪里可以测试这一点

---

*因为预渲染是一项高级实验性功能，错误触发预渲染可能会导致用户体验下降，包括带宽使用率增加、其他链接加载速度减慢以及内容稍显陈旧。如果您对下一个用户访问的页面有很高的信心，并且如果您真的为用户提供了附加值，那么您应该只考虑触发预发布。p> 更改href是否会取消网络请求可能取决于浏览器，是否将其从缓存中删除可能取决于浏览器和用户设置

---

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

Chrome/IE/Edge允许每个窗口预呈现一页（请注意，它不是选项卡），这意味着忽略第二个预呈现提示。因此，您必须更新href属性，以便告诉浏览器必须预呈现另一个页面。当href属性发生更改时，Chrome会取消先前预呈现的页面，看起来IE11和Edge的行为方式相同，但很难验证。要查看在Chrome中预渲染的内容，您可以访问

chrome://net-internals/#prerender

。请注意，当开发工具打开时，Chrome/IE/Edge会忽略预呈现的页面，他们会从头开始加载该页面

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

我也对这个题目感兴趣。几个月前，我启动了一个开源项目（），该项目跟踪用户如何浏览网站，并添加链接标签来提示浏览器。如果你愿意，你可以在你的网站上试试