鼠标悬停预渲染？ | CSS-Tricks

InstantClick 是一个非常流行的 JavaScript 库（截至我写作本文时，已有 4,344 颗星）。以下是要点

在访问者点击链接之前，他们会将鼠标悬停在该链接上。这两个事件之间通常会经过 200 毫秒到 300 毫秒（在这里测试自己）。 InstantClick 利用这段时间预加载页面，以便在您点击时页面已经存在。

您将鼠标悬停在链接上，它会使用 Ajax 获取该页面并进行预渲染。点击时，它会替换 <body> 和 <title>，并更改 URL。

我刚听说它。听起来很聪明。渐进式增强。提高了感知性能。我可以想象有人会反对带宽问题。下载我鼠标悬停的每个页面似乎有点带宽贪婪。

不过，这让我思考... 难道没有新式的预渲染技术？有的

<link rel="prerender" href="(url)">

实际上，它并不那么新式。 Steve Souders 在 2013 年就写过关于它的文章

这就像在隐藏的选项卡中打开 URL 一样——所有资源都会下载，DOM 会创建，页面会布局，CSS 会应用，JavaScript 会执行，等等。如果用户导航到指定的 href，那么隐藏页面就会被替换到视图中，使其看起来是立即加载的。

Can I Use 显示了良好的支持

这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本上支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
13	否	11	79	否

移动设备/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	否	否	否

这是否意味着我们可以做这样的事情？

var links = document.querySelectorAll('a');

[].forEach.call(links, function(link) {
    
  link.addEventListener("mouseenter", function() {
    
    var newPreLoadLink = document.createElement("link");
    newPreLoadLink.rel = "prerender";
    newPreLoadLink.href = link.href;
    
    document.head.appendChild(newPreLoadLink);
    
  })
  
});

问题是，像这样动态插入的链接元素是否真的会触发预渲染。我在 Chrome 中进行了一个相当原始的测试，它似乎不起作用。哦，好吧。

如果您想比悬停更具预测性，可以尝试使用 Premonish，“一个用于预测用户接下来将与哪个元素交互的库”。

如果您对这类事情感兴趣，预渲染并不是唯一的方案。 Robin 去年写了关于所有这些内容的文章。

Michelle

# 2016年12月7日

一方面很棒，减少了感知等待时间。另一方面... 我经常在带宽有限的地区，这就像设置自动播放视频一样，它会在我试图缓冲或播放时扼杀一切。

如果浏览器更自动化，我会觉得可以接受，嗯，这需要一点时间/资源，你想...

哈哈，土地和无线服务提供商是高带宽低数据上限到低带宽。

Lukas

评论永久链接# 2016年12月7日

我也有同样的担忧。我认为浏览器应该决定何时预加载网站，以及何时最好不预加载。当您身处像德国这样的发展中国家（在互联网方面）时，这很容易让体验变得更糟。也许应该考虑将页面加载为渐进式 Web 应用程序，这样（Android）用户就不必加载两次。

但是，无论何时您在桌面设备上，并且可以确定连接速度，这个库可能对用户有利..

Philips Ekuma

# 2016年12月7日

这个功能会严重消耗带宽和系统资源。如果用户将鼠标悬停在链接上，但最终没有点击它，用于下载页面和渲染页面的带宽和资源都是浪费。

我这么说，是因为在我个人看来，超过 60% 的时间，我会将鼠标悬停在链接上，然后查看状态栏以查看链接会把我带到哪里，然后再点击它。我想很多其他人也是这样做的。

我仍然很高兴这个功能被创建出来。向创建者致敬。他为改进它打开了通往各种令人惊叹的可能性的大门。甚至创建者也可以改进它。做得好。

Nelo Mitranim

# 2016年12月8日

Ajaxing 和替换文档不必在鼠标悬停时进行。您可以在点击时执行此操作，对于非 SPA 网站来说，这仍然是大幅度的提速。这种技术通常称为“pjax”。我写了一个微型库，它会自动执行此操作，我已经在生产环境中使用了一年多。您可能想尝试一下： https://github.com/Mitranim/simple-pjax

Jacopo Tarantino

# 2016年12月8日

去年我写了一个 Rails gem，用于将预渲染标签添加到您的页面中。我还写了一篇关于它的完整文章！ https://jack.ofspades.com/prefetching-preloading-and-prerendering-content-with-html/

Creative Computer Consulting

# 2016年12月9日

一如既往，非常有用的技巧，感谢分享

Andrew

# 2016年12月9日

我实际上认为这很棒。它只需要选择性地使用。特别是与转化漏斗相关的内容，例如结账、登录、注册、愿望清单以及具有特定转化目标的登录页面。

Alberto

# 2017年1月2日

这很有趣，浏览器确实以某种方式做到了这一点

想象一下，当在包含多个链接的页面上滚动时，这种方法的效果

此评论线程已关闭。如果您有重要信息要分享，请联系我们。