前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Instant.Page 的食用方式

Instant.Page 的食用方式

作者头像
Cesirdy
发布2023-05-29 13:59:28
2180
发布2023-05-29 13:59:28
举报
文章被收录于专栏:CSD的一些笔记CSD的一些笔记
  1. 官方页面: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 即可自动开启,不需要额外配置。

代码语言:javascript
复制
<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"。如:

代码语言:javascript
复制
<body data-instant-intensity="mousedown">
  ...
</body>

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

修改默认的预加载延迟

使用 data-instant-intensity="延迟时间(单位ms)",如:

代码语言:javascript
复制
<body data-instant-intensity="150">
  ...
</body>

将延迟时间修改为 150ms。

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

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

代码语言:javascript
复制
<body data-instant-intensity="viewport">
  ...
</body>

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

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

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

代码语言:javascript
复制
<body data-instant-mousedown-shortcut>
  ...
</body>

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

黑名单与白名单

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

代码语言:javascript
复制
<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”,然后坑了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用
  • 原理
  • 配置
    • 按下鼠标时预加载
      • 修改默认的预加载延迟
        • 链接进入可视区域后立刻预加载
          • 按下鼠标时立刻加载并切换
            • 黑名单与白名单
              • 外部链接
              • 后记
              相关产品与服务
              内容分发网络 CDN
              内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档