lib.im

instant.page:一个网站预加载JS 脚本,实现提高网站页面加载速度
介绍instant.page 使用即时预加载技术,在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 6...
扫描右侧二维码阅读全文
31
2019/07

instant.page:一个网站预加载JS 脚本,实现提高网站页面加载速度

介绍

instant.page 使用即时预加载技术,在用户点击之前预先加载页面。

当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内容,从而达到缩短页面加载时间的目的。
instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。

官方网站:instant.page
instant.page的前身应该就是instantclick,官网http://instantclick.io.
可以看出instantclick2014年更新到3.1.0版本之后便停更了。和instant.page作者都是:Alexandre Dieulot.
关于instantclick的介绍,可以移步到xiaoz大佬的博客使用instantclick预加载,让网站速度更进一步

注意几点:

对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。
会显著增加自己的网站的 PV 以及请求量。
只会预加载 html 页面,而不会加载图片等资源。因此点击预加载的页面是秒开的,图片在点击之后才会加载,不用担心与 lazyload 的各种不兼容问题。

使用方法

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

使用官方脚本

官方提供的带有Cloudflare加速的脚本,目前是2.0.0版本

<script src="//instant.page/2.0.0" type="module" defer integrity="sha384-D7B5eODAUd397+f4zNFAVlnDNDtO1ppV8rPnfygILQXhqu3cUndgHvlcJR2Bhig8"></script>

自托管

可以自己把脚本下来保存下来,然后使用

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

使用公共库

<script src="https://cdn.jsdelivr.net/npm/instant.page@2.0.0/instantpage.min.js"></script>
Last modification:September 29th, 2019 at 05:38 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment