网站预加载JS脚本 instant.page

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

原理介绍及作用

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

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

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

效果演示

经过我的测试，发现以下几点：

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

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

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

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

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

食用方法

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

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

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

二. 自托管

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

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

三. 用我的
脚本放在又拍云，不用担心拖慢速度。

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

参考自康康、 夏目友人帐以及instant.page官网