Instant.page是一个免费的开源库，它使用即时预加载，这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML，尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器，以便您的页面保持流畅，并且在用户启用数据保护程序时不会预加载。
即时页面功能可让您在用户将鼠标悬停在链接上后在后台自动预取URL。这导致几乎瞬时的加载时间，并改善了用户体验和感知性能（网站感觉有多快）。我们利用Alexandre Dieulot开发的Instant.page库。
<link href="https://domain.com/post">
预取的工作原理
就服务器和移动设备的性能提升和低利用率而言，以上是最佳组合。该功能尊重您的移动设备（Android、iPhone）是否启用了数据保护程序或低数据模式。如果打开，则不会预加载任何内容。
由于此功能适用于鼠标悬停，因此不会显示在速度测试工具上。但我们鼓励您在启用后点击您的网站。你应该能感觉到不同！
亚马逊和其他公司发现，消除100毫秒的延迟可以提高1%的销售额。但是网络上的延迟很难克服。
Instant.page使用即时预加载——它在用户点击页面之前预加载页面。
（1）桌面端
在用户点击链接之前，他们将鼠标悬停在该链接上。当用户悬停65毫秒时，有二分之一的机会点击该链接，因此instant.page此时开始预加载，页面预加载平均超过300毫秒。
另一种选择是在用户开始按下鼠标而不预加载时加载页面。这使得未使用的请求为零，同时仍将页面加载平均提高了80毫秒。
您还可以在悬停时或在链接可见时立即预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。
（2）移动端
用户在释放之前开始触摸他们的显示器，平均留出90毫秒让页面预加载。
另一种选择是在链接可见时立即预加载链接。
欺骗大脑
人脑将不到100毫秒的动作视为瞬间。因此，instant.page让您的页面即使在3G上也感觉即时（假设您的页面渲染速度很快）。
轻松使用您的服务器和用户的数据计划
仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML ，尊重您的用户和服务器的带宽和CPU。
它使用被动事件侦听器和requestIdleCallback以使您的页面保持流畅。它尊重数据保护模式。它是1kB并在其他所有内容之后加载。它是免费和开源的（MIT许可证）。
具有数据属性的附加选项
您可以使用以下data-instant属性启用即时页面的其他选项。只需将这些属性中的任何一个添加到文档中的<body>标记，剩下的就交给我们了。
您可以在instant.page了解更多关于这些不同属性的作用。有关将其中一些属性添加到<body>标记的一些方法，请参见下文。
data-instant-allow-query-string data-instant-allow-external-links data-instant-whitelist data-instant-intensity="mousedown" data-instant-intensity="mousedown-only" data-instant-intensity="150" data-instant-intensity="viewport" data-instant-intensity="viewport-all" data-instant-mousedown-shortcut
页面加载后添加JavaScript
第一种方法是在页面加载结束时触发JavaScript。可以将以下代码添加到WPTurbo中的页脚代码框中。
假设您想更改脚本在预加载前等待多长时间（以毫秒为单位）的数据强度时间。您可以像这样添加它：
<script type='text/javascript'>
document.body.setAttribute('data-instant-intensity', '150');
</script>
一次只能使用一个data-instant-intensity属性，但您可以将其与其他属性混合搭配。因此，例如，这将起作用：
<script type='text/javascript'>
document.body.setAttribute('data-instant-intensity', '150');
document.body.setAttribute('data-instant-allow-external-links', 'true');
</script>
注意：上述方法会向您的站点添加一个额外的请求。
与body标签合并
第二种方法是在呈现页面时合并现有body标记中的属性。这不需要额外的请求。可以将以下代码添加到 WPTurbo 中的页脚代码框中。这是一个例子：
<body data-instant-intensity='mousedown' data-instant-allow-external-links > </body>
预加载时间设置
默认情况下，instant.page在悬停链接后以及移动用户开始触摸其显示屏时预加载65毫秒。还有其他选择。
按下鼠标时预加载
要在用户开始按下鼠标按钮时加载页面，在释放它之前，将其data-instant-intensity="mousedown"作为属性添加到<body>。
页面预加载平均需要80毫秒。
要在桌面上以这种方式使用而不是在移动设备上预加载，请使用data-instant-intensity="mousedown-only".
调整悬停延迟
对于一些具有大量点击目标的网站，例如一些电子商务网站，65毫秒规则不适用：它会为每个访问的页面预加载两次以上。
要增加悬停延迟，请在属性中传递毫秒数，例如150ms: data-instant-intensity="150"。
或者，如果您不关心提出很多请求，则可以减少它。
在链接可见后立即预加载链接
在小型移动设备（例如智能手机）上，如果您希望您的页面在更多情况下是即时的，您可以在链接可见时立即预加载它们。
为此，请将data-instant-intensity="viewport"其作为属性添加到<body>。
"viewport-all"如果您不担心发出大量请求，您也可以使用 来在其他外形尺寸上执行此操作。
请注意，如果用户使用2G或启用了数据保护程序，它将回退到使用默认选项。
按下鼠标时触发点击
如果您想更快地触发点击，请将data-instant-mousedown-shortcut其作为属性添加到<body>。请注意，这可能与现有脚本冲突。
（此功能从v5.1开始是可选的，在5.0中默认启用，您需要使用data-instant-no-mousedown-shortcut它来禁用它。）
未预加载的页面
默认情况下，不会预加载URL中带有查询字符串（“？”）的页面，因为它们有时会触发操作（例如注销或删除某些内容）。
使用查询字符串将页面列入白名单
如果您想让所有带有查询字符串的页面都被预加载，data-instant-allow-query-string请在<body>中添加一个属性。
如果您只想允许预加载带有查询字符串的选择链接，请为其添加一个data-instant属性：
<a href="articles?page=2" data-instant>Page 2</a>
黑名单页面
要手动将触发操作的链接列入黑名单，data-no-instant请为其添加属性：
<a href="logout?token=f2d2650ce6" data-no-instant>Log out</a>
这主要在您使用时使用data-instant-allow-query-string，否则默认情况下带有查询字符串的链接已经被列入黑名单。
外部链接
默认情况下不预加载外部链接，以允许它们都data-instant-allow-external-links向<body>添加属性。
要仅允许某些外部链接，data-instant请为其添加属性。
仅预加载部分链接（白名单模式）
如果您只想预加载特定链接，data-instant-whitelist请在<body>中添加a并通过向链接添加data-instant属性来标记要预加载的链接。
内容拦截器
出于可疑的原因，预取被某些内容拦截器（例如uBlock Origin）视为侵犯隐私。请务必在您的网站上禁用内容拦截器以查看正在发出的预加载请求。
Firefox中的uBlock Origin完全禁用预取；如果您使用它，您需要暂时完全禁用扩展程序，而不仅仅是为您的站点关闭它。
这只会影响使用EasyPrivacy列表的内容拦截器的用户。它适用于AdBlock；而uBlock Origin的用户是少数。如果您想让instant.page为您网站上具有隐私内容拦截器的用户工作，您可以自行托管该脚本。
技术细节
使用 <link href=”url “> 完成预加载。
源代码有200行可读。
浏览器支持
Instant.page是渐进式增强——对不支持它的浏览器没有影响。
Chrome和基于Chromium的浏览器从61版（2017年9月发布）开始全面支持。
Firefox支持<link>（从2006年开始！），但如果页面没有被缓存（这是一个开放的错误），它将重新下载页面。
不兼容的浏览器
Safari 13.0支持 <link> 但默认禁用。希望它将在2020年9月在Safari 14.0中启用。
UC浏览器不支持模块，因为它基于Chromium 57。基于Chromium 69的支持模块的新版本于2018年10月宣布，但尚未发布。
安全CDN
Instant.page的脚本由Cloudflare Workers托管，因此没有服务器可以入侵。
此外，它使用子资源完整性让现代浏览器验证文件未被篡改。它作为一个模块加载，因此大多数旧浏览器不会执行它。
自托管
也可以自己托管脚本。下载最新版本，然后在</body>之前添加一个模块脚本标签：
<script src="instantpage-5.1.1.js" type="module" defer></script>
你也可以通过npm安装它：
npm i instant.page
历史
在hover和touchstart上预加载网页的想法来自我的一个旧库InstantClick，它于2014年1月推出，它使用Ajax和history.pushState而不是<link>，将网站转换为单一的页面应用。它使网站更加流畅，但需要额外的工作。
不幸的是，InstantClick主要只是一个概念证明，因为它没有很好的文档。
Google在2018年12月发布的quicklink会在链接显示后立即预加载带有<link>的链接，这清楚地表明我应该专注于构建一个“精简”、更易于使用的InstantClick版本，即Instant.page，于2019年2月推出。
未来相关项目
InstantClick提供了最流畅的体验，同时仍然不需要像框架一样多的工作（提供较少的结果），所以我正在考虑在2020年晚些时候再次开发它。它将重命名为“instant.page extra”。
评论留言
唇枪舌剑 (1)
九凌网络
2022.8.5 15:08
确实，网站的加载速度一定程度上决定了用户的去留，这篇文章非常有用，感谢分享