Question

我有以下代码在hover上预取和预呈现*特定链接，我的问题是，我是否每次都需要添加一个新链接，或者我更改 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

Chrome / IE / Edge允许每个窗口预渲染一页（请注意，它不是标签页），这意味着忽略了第二个预渲染提示。因此，您必须更新href属性以告知浏览器必须预先渲染另一个页面。当href属性发生变化时，Chrome会关闭先前预渲染的页面，看起来IE11和Edge的行为方式相同，但很难验证。要查看Chrome中预呈现的内容，您可以访问RewriteCond %{REQUEST_URI} !\.[a-z0-9]+$ [NC] RewriteRule ^(.*)([^/])$ https://%{HTTP_HOST}/$1$2/ [L,R=301]。请注意，当打开开发工具时，Chrome / IE / Edge会忽略预渲染页面，他们会从头开始加载。

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

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

Answer 2

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

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

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

2 个答案: