Instant.Page 的食用方式

date
May 1, 2022
slug
instant-page
status
Published
tags
代码
summary
官方页面: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.
type
Post
官方页面:https://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”,然后坑了。

© Cesirdy 2022

粤ICP备2022045639号又拍云