Instant.Page 的食用方式

May 01, 2022代码

官方页面：https://instant.page Github：https://github.com/instantpage/instant.page

Make your site’s pages instant in 1 minute and improve your conversion rate noticeably.

使用

直接在页面内引入 JS 即可自动开启，不需要额外配置。

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

貌似作者的这个 JS 是托管在 Cloudflare Workers 上的，所以速度应该还行，也可以用其他 CDN。

原理

用户悬停在链接上时，自动在 <head> 内创建一个 <link rel="prefetch" href="url"> 来进行预加载并缓存，当用户点击链接时就会使用已经缓存的内容从而达到提速的效果。

配置

默认配置下是用户悬停链接上65ms后进行预加载。可以通过在 <body> 上写入配置来修改。

按下鼠标时预加载

在 <body> 写入 data-instant-intensity="mousedown"。如：

<body data-instant-intensity="mousedown">
  ...
</body>

如果不想在移动端点击时预加载，则用 data-instant-intensity="mousedown-only"，只会检测鼠标按下。

修改默认的预加载延迟

使用 data-instant-intensity="延迟时间（单位ms）"，如：

<body data-instant-intensity="150">
  ...
</body>

将延迟时间修改为 150ms。

链接进入可视区域后立刻预加载

这个只会在移动端上工作，一般不建议用，因为流量消耗太大，比较浪费。

<body data-instant-intensity="viewport">
  ...
</body>

如果需要在所有设备而不只是移动端，则使用 data-instant-intensity="viewport-all"
需要注意的是如果用户是2G网或者开了数据保护之类的则不会启用。

按下鼠标时立刻加载并切换

这个官方文档说的有点抽象，自己试了下好像是预加载完立刻切换页面，而不是缓存完等用户自己切换。应该是吧，不是很清楚。

<body data-instant-mousedown-shortcut>
  ...
</body>

在 5.0版本是默认打开的，如果你使用的是这个版本而且想关掉就写入 data-instant-no-mousedown-shortcut

黑名单与白名单

默认情况下不会预加载带 ? 的链接，如 articles?page=2 之类。如果要预加载这些链接则将链接修改为如下：

<a href="articles?page=2" data-instant>Page 2</a>
<!-- 在<a>中写入data-instant -->

或者你可以设置为全局白名单。只要在 <body> 中写入 data-instant-allow-query-string
如果你使用了全局预加载 data-instant-allow-query-string 后又有部分链接不想进行预加载的则需要再添加黑名单属性，则需要在 <a> 中添加 data-no-instant。

外部链接

默认情况下不预加载跳转到外部的链接，如果需要全局加载外链则在 <body> 中添加 data-instant-allow-external-links。
如果只需要部分外链预加载则在 <a> 中写入 data-instant 并在 <body> 中写入 data-instant-whitelist 开启白名单模式。（和上面的全局模式冲突）

后记

三思后我还是开了 data-instant-intensity="mousedown"，因为我 CDN 开IP请求限制了。
如果需要更快更好的体验我建议还是 pjax 或者作者的另一个项目 InstantClick。 Instant.Page 主要是轻量方便，而且兼容性比较好，不像 pjax 这些需要调很多配置还要和同页面其他 JS 做兼容。
作者说要在 2020 年年底整个 “instant.page extra”，然后坑了。