相思资源网 Design By www.200059.com

通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

InstantClick的安装

安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如:

<script src="/UploadFiles/2021-04-02/instantclick.min.js">

InstantClick可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。由于不懂JS,不知道这会不会影响统计。

InstantClick工作原理

InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。

InstantClick的进度条

默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色:

#instantclick-bar {
  background: white;
}

也可以隐藏进度条:

#instantclick {
  display: none;
}

WordPress插件

如果你使用的是WordPress博客,你可以搜索安装InstantClick插件https://wordpress.org/plugins/instantclick/,安装完成之后,在WordPress后台的设置菜单下,会增加一个InstantClick选项。

提升页面加载速度的插件InstantClick

相关链接:

测试鼠标点击延迟:http://instantclick.io/click-test

让InstantClick兼容百度统计、Google Analytics:https://www.jb51.net/hack/123521.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
InstantClick,InstantClick加载速度

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“提升页面加载速度的插件InstantClick”

暂无提升页面加载速度的插件InstantClick的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。