MENU

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

2022 年 04 月 25 日 • 阅读: 393 • 笔记

instant.page 使用即时预加载技术,在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内容,从而达到缩短页面加载时间的目的。

PC端:当用户的鼠标在链接上悬停了65毫秒时,这个脚本开始预加载页面;还有一种就是在用户开始按下鼠标时 ,开始预加载页面。

移动端:用户在滑动屏幕时,链接可见时,就开始预加载。

只有当用户鼠标停留在一个链接上超过65毫秒时才预加载页面,并且只会预加载 html 页面,不会加载图片等资源,所以不用担心与流量损耗等问题.
但是PV和请求量几乎是成倍的增长,对于使用CDN全站加速的可能要多考虑一下了,因为请求数也是要收费的,对于像我这种破站,请求量也增长不了多少::quyin:watermaleon::

instant.page 是渐进式增强,所以对不支持它的浏览器没有影响。

GitHub地址:https://github.com/instantpage/instant.page

调用方法

注意

由于此脚本是官方的,储存在国外服务器,对国内访问不太友好,可以将该JS脚本储存到自己的服务器上,点击这里获取js脚本,然后再根据以下代码在</ body> 之前调用此js脚本

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

也可以直接使用我的脚本,放在腾讯云的云储存里,速度都是不错的。

<script src="https://cdn.hq233.cn/instantpage.js" type="module"></script>

如果站点服务器实在太慢的话,其实使用预加载的加速效果并不明显,做动静分离可以很大程度改善站点页面加载的速度,可以参考下我的这篇博文:Typecho博客做动静分离达到优化速度

本文到此结束
  • 文章标题:通过js脚本实现网站预加载提升页面加载速度
  • 文章链接:https://hq233.cn/archives/472.html
  • 作品采用:CC BY-NC-SA 4.0 许可协议授权
  • 版权所有:本文版权归 隔壁小胡的博客所有
    转载请先获得本人同意!
    (如有侵权,请 点此联系我删除 )
  • 最后编辑于: 2022 年 04 月 27 日
    返回文章列表 文章二维码
    本页链接的二维码
    打赏二维码