自由屋推书网—热门的小说推荐平台!

你的位置: 首页 > 杂谈

通过js脚本实现网站预加载提升页面加载速度

2022-04-26 14:47:59

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>

如果站点服务器实在太慢的话,其实使用预加载的加速效果并不明显,做动静分离可以很大程度改善站点页面加载的速度。

编辑推荐

热门小说