简介

在桌面上：
在用户单击链接之前，他们将鼠标悬停在该链接上。当用户悬停了65毫秒时，他们有两次单击该链接的机会，因此Instant.page会在此时开始预加载，平均需要300毫秒以上的时间才能预加载该页面。
另一种选择是在用户释放鼠标之前即开始按下鼠标时进行预加载。这实际上使未使用的请求为零，同时平均仍将页面负载提高了80毫秒。
在移动：
用户在释放显示器之前就开始触摸他们的显示器，平均需要90毫秒来预加载页面。
另一种选择是在链接可见后立即对其进行预加载。
-来自官网Google翻译

GitHub项目：https://github.com/instantpage/instant.page

使用

使用预加载

  • 官方使用方法：Cloudflare 加速的脚本： 
    <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

    代码添加到网站的</body>标签之前

  • 脚本保存到自己服务器使用：
  1. 【脚本下载】
  2. 另存为 instantpage3.0.0.js ，将以下代码添加到网站的</body>标签之前： 
    <script type="module" src="‘存放路径或域名目录’/instantpage3.0.0.js"></script>

定义预加载

白名单标签属性： data-instant ，例：

<a href="https://ensu.cc" data-instant>ensu's blog</a>

黑名单标签属性： data-no-instant ，例：

<a href="https://www.baidu.com" data-no-instant>百度</a>

全局允许：在 <body> 中添加 data-instant-allow-query-string 属性

局部允许：在使用的标签中添加 data-instant 属性（和白名单属性一样）

仅预加载部分指定链接（白名单模式）：如果只想预加载特定的链接，请在 <body> 中添加一个 data-instant-whitelist 标签，并通过向其添加 data-instant 属性来标记要预加载的链接。

注意

预加载可能会存在增加耗费少量 CDN 流量问题，请自行对比后考虑是否使用。

参考整理自：ensu's blog 、instant.page、Shenyun、爱皮哇、Sanshi