html图片预加载 博客,网站预加载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加速的脚本

建议服务器在国外的朋友使用。只要把这行代码添加到网站的