instant.page 使用即时预加载技术,在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内容,从而达到缩短页面加载时间的目的。
- PC 端:当用户的鼠标在链接上悬停了 65 毫秒时,这个脚本开始预加载页面;还有一种就是在用户开始按下鼠标时 ,开始预加载页面。
- 移动端:用户在滑动屏幕时,链接可见时,就开始预加载。
只有当用户鼠标停留在一个链接上超过 65 毫秒时才预加载页面,并且只会预加载 html 页面,不会加载图片等资源,所以不用担心与流量损耗等问题.
但是 PV 和请求量几乎是成倍的增长,对于使用 CDN 全站加速的可能要多考虑一下了,因为请求数也是要收费的,对于像我这种破站,请求量也增长不了多少
instant.page 是渐进式增强,所以对不支持它的浏览器没有影响。
GitHub 地址:https://github.com/instantpage/instant.page
注意:由于此脚本是官方的,储存在国外服务器,对国内访问不太友好,可以将该 JS 脚本储存到自己的服务器上,点击这里获取 js 脚本,然后再根据以下代码在 之前调用此 js 脚本
调用方法
<script src="`存放路径`/instantpage.js" type="module"></script>
如果站点服务器实在太慢的话,其实使用预加载的加速效果并不明显,做动静分离可以很大程度改善站点页面加载的速度。