婷姐 发表于 4 小时前

如何使用预加载JS脚本instant.page-实现网站页面秒开

无意间看到一篇文章,说使用预加载JS脚本instant.page-能实现网站页面秒开。
本人没测试过,不知道哪位大哥能测试下,有效果或者没效果可以回我帖。


本篇文章主要介绍了一个网站预加载的脚本instant.page
作用是可以预加载用户想访问的页面,当用户真正点击链接后,就会直接从缓存中读取,以此提升网站的访问速度。
传闻可以瞬间提高网站页面加载速度。我一直对网站加载速度的优化很感兴趣,于是便立即拿来试试,效果果然如说的那样,打开页面嗖嗖的 ::paopao:tieba_emotion_53::
instant.page 原理的话我们不必深层了解,只需知道:


在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊65毫秒时,他们将点击该链接有两个机会,因此 instant.page 此时开始预加载,平均超过 300 毫秒,以便页面预加载。
instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。
效果
instant.page 对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。
如图所示,当鼠标在左侧文章链接悬停超过 65ms 后,左侧 网络 即会对站内页面进行预加载(绿色部分)
另外而悬停未超过 65ms 时,则不会进行预加载(红色部分)


使用 instant.page 只会预加载 html 页面,而不会加载图片等资源,因此点击预加载的页面是秒开的,图片在点击之后才会加载,不用担心与 lazyload 的各种不兼容问题。

使用方法

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


<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBz加-速-器kLHw"></script>代码是这个,论坛不知道怎么会自动转换

2.自托管文件只需将下面这段 js文件 上传到自己服务器,然后在</body>标签之前根据路径添加下面的代码即可(强烈建议服务器在国内的朋友使用)<script src="`存放路径`/ instant.page-5.1.0.js" type="module"></script>
下载地址:https://www.lanzoux.com/iOzIvfonj9a





https://img.4414.cn/forum/202409/21/185901ghsdjpni9sm2wjoz.jpg

浅生 发表于 4 小时前

这种代码增加N倍服务器访问压力

IT618发布 发表于 4 小时前

我试试

TyCoding 发表于 4 小时前

当鼠标在左侧文章链接悬停超过 65ms 后,左侧 网络 即会对站内页面进行预加载,对移动端有作用吗?

Crystαl 发表于 4 小时前

Js太强大了。我觉得不差于php的

拾光 发表于 4 小时前

谁试了,怎么样

独家记忆 发表于 4 小时前

代码是这个

TyCoding 发表于 4 小时前

还行吧,就是鼠标放在上面就会自动加载

拾光 发表于 4 小时前

移动端好像不行,pc端测试还行

IT618发布 发表于 4 小时前

用过预加载JS代码,就是鼠标停留在链接处两三秒就预加载,再点击链接,秒加载页面,如果网站用了CDN加速,会加快流量消耗
页: [1]
查看完整版本: 如何使用预加载JS脚本instant.page-实现网站页面秒开

创宇盾启航版免费网站防御网站加速服务