借助 instant.page 打造极速体验

借助 instant.page 打造极速体验

温馨提示: 本文最后更新于 2023-03-22 18:07:10,某些文章具有时效性,若有错误或已失效,请在下方留言!

简介

instant.page 是一个 JavaScript 库,用于加速网页加载。它通过提前预加载用户可能点击的链接的目标页面,让用户在点击链接时几乎能够立刻看到新页面,从而改善页面的加载体验。它的工作原理是通过监听页面上的 mouseenter 事件,当鼠标悬停在链接上时,提前加载目标页面的内容,等用户点击时,页面已经部分加载,显著提升加载速度。

它的使用很简单,只需要将它的 JavaScript 文件添加到你的网页中即可,无需对现有代码做大量修改。特别适合那些需要优化页面性能,提升用户体验的开发者。

大致意思应该是:

  • 桌面端:在用户单击链接之前,他们将鼠标悬停在该链接上。当用户悬停了 65 毫秒时,有一次机会在两个链接上单击,因此此时 instant.page 开始预加载,平均留下超过 300 毫秒的页面来预加载。 您还可以在悬停上预加载,或在链接可见后立即预加载,并在用户开始按下鼠标时触发单击,使您的页面成为世界上最快的页面。
  • 移动端:用户在发布显示屏之前开始触摸其显示屏,平均留出90 毫秒用于预加载页面。另一种选择是一旦链接可见,就立即预加载它们。

使用方法

1.使用官方脚本

只要把这行代码添加到网站的 标签之前即可。(由于脚本托管在国外,只建议国外的朋友使用,国内的朋友加载官方的资源会比较慢哦)

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2.自托管文件 (推荐)

只需将下面下载地址里的 js 文件 上传到自己服务器,然后在 标签之前根据路径添加下面的代码即可(强烈建议服务器在国内的朋友使用)

<script src="`存放路径`/instantpage.js" type="module"></script>

3.公共 CDN 资源 (推荐)

只要把这行代码添加到网站的 标签之前即可。(由于文件全球 CDN,所以强烈建议使用,节省服务器资源) (速度自测)

<script src="https://jsd.admincdn.com/gh/instantpage/instant.page@master/instantpage.js" type="module"></script>
<script src="https://jsd.admincdn.com/npm/instant.page@5.1.0/instantpage.js" type="module"></script>

项目地址

借助 instant.page 打造极速体验-星雨博客
借助 instant.page 打造极速体验
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码

    暂无评论内容