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

婷姐 · 发表于 2024-9-28 12:50:46

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

无意间看到一篇文章，说使用预加载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>

复制代码

如何使用预加载JS脚本instant.page-实现网站页面秒开测试,图片,托管,浏览器,服务器

代码是这个，论坛不知道怎么会自动转换

2.自托管文件只需将下面这段 js文件上传到自己服务器，然后在</body>标签之前根据路径添加下面的代码即可（强烈建议服务器在国内的朋友使用）

<script src="`存放路径`/ instant.page-5.1.0.js" type="module"></script>

复制代码

下载地址：https://www.lanzoux.com/iOzIvfonj9a

如何使用预加载JS脚本instant.page-实现网站页面秒开测试,图片,托管,浏览器,服务器

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！