简介
在桌面上：
在用户单击链接之前，他们将鼠标悬停在该链接上。当用户悬停了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>标签之前- 脚本保存到自己服务器使用：
- 【脚本下载】
另存为
instantpage3.0.0.js，将以下代码添加到网站的</body>标签之前：<script type="module" src="‘存放路径或域名目录’/instantpage3.0.0.js"></script>
bootcdn加速：
https://www.bootcdn.cn/instant.page/
<script type="module" src="https://cdn.bootcss.com/instant.page/3.0.0/instantpage.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 属性来标记要预加载的链接。
效果
我这边此文的时候刚刚启用，所以对PV的对比图我使用了 SANSHI 的，如下：
注意
预加载可能会存在增加耗费少量 CDN 流量问题，请自行对比后考虑是否使用。
参考整理自：ensu's blog 、instant.page、Shenyun、爱皮哇、Sanshi
Comment here is closed