instant.page : 简单好用的页面预加载JS脚本

网络技术 admin 4个月前 (05-30) 68次浏览 0个评论
文章目录[隐藏]

instant.page : 简单好用的页面预加载JS脚本

说明

有一项技术叫做prefetch,这个技术,其实说白了,就是一项预加载技术,当用户有意向访问某个页面之前,浏览器首先对此页面进行预加载,当用户真正点击链接后,会从预加载的缓存中直接读取页面内容,缩短页面的加载时间。

而如何来使用这项技术?其实在html5的链接标签中有一个rel属性,其中有个参数就是prefetch,不过使用的人不多。

本文介绍的instant.page,就是使用这项技术的一个脚本,脚本会根据用户鼠标在链接上的停留时间进行判断,当达到65毫秒,用户有一半的机会打开此链接,instant.page将会对此页面进行预加载。

使用

1、使用官方提供的带有Cloudflare加速的脚本

instant.page的使用非常简单,首先打开官网:https://instant.page,会看到一个非常简洁的页面,并得到一行代码:

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>

只需要把这行代码添加到网站的 </body> 之前即可。

2、自托管

由于官方的JS脚本是存储在国外的,所以建议各位直接将脚本保存到本地进行加载,缩短脚本载入的时间。只需下载js文件并上传到自己服务器 —> 本站下载

然后在</body>标签之前根据路径添加下面的代码即可。

<script src="存放路径/instantclick-1.2.2.js" type="module"></script>


免费部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:instant.page : 简单好用的页面预加载JS脚本
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址