网站预加载 JS 脚本 instant.page

admin

发表文章数:3074

  • 本篇文章介绍了一个网站预加载的脚本 instant.page
  • 作用是可以预加载用户想访问的页面,当用户真正点击链接后,就会直接从缓存中读取,以此提升网站的访问速度。

原理介绍及作用

在逛夏目友人帐的网站时无意间看到这样一个脚本,号称可以瞬间提高网站页面加载速度。我一直对网站加载速度的优化很感兴趣,于是便立即拿来试试,效果果然如他说的那样不错。

instant.page 原理的话我们不必深层了解,只需知道:

  • 在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊 65 毫秒时,他们将点击该链接有两个机会,因此 instant.page 此时开始预加载,平均超过 300 毫秒,以便页面预加载。
  • instant.page 是渐进式增强 – 对不支持它的浏览器没有影响。

效果演示

经过我的测试,发现以下几点:

  • instant.page 对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。

如图所示,当鼠标在左侧文章链接悬停超过 65ms 后,右侧 Network 即会对文章页面进行预加载。而悬停未超过 65ms 时,则不会进行预加载(红色部分)

网站预加载 JS 脚本 instant.page

  • 使用 instant.page 会显著增加自己的网站的 PV 以及请求量。

如图所示(数据仅供参考),在我 3 月 25 日凌晨使用了 instant.page 脚本之后,PV 和请求量几乎是成倍的增长。(对于使用CDN全站加速的童鞋可能要多考虑一下了,因为请求数也是要收费的。

网站预加载 JS 脚本 instant.page

  • 使用 instant.page 只会预加载 html 页面,而不会加载图片等资源。(可以看到上图,并没有太多的流量损耗)因此点击预加载的页面是秒开的,图片在点击之后才会加载,不用担心与 lazyload 的各种不兼容问题。

食用方法

一。使用官方提供的带有 Cloudflare 加速的脚本

建议服务器在国外的朋友使用。只要把这行代码添加到网站的 标签之前即可。(一般都可以在后台直接添加

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

二。自托管

建议服务器在国内的朋友使用。只需将下面这段 js 上传到自己服务器,然后在 标签之前根据路径添加下面的代码即可。点击查看

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

三。用我的网站预加载 JS 脚本 instant.page
脚本放在又拍云,不用担心拖慢速度。

<script src="https://cdn.zrahh.com/js/instantclick-1.2.2.js" type="module"></script>

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《网站预加载 JS 脚本 instant.page》 发布于2019-12-15

分享到:
赞(0) 打赏

评论 抢沙发

4 + 9 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册