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

站长资源 2024/11/28 佚名

2 0 1

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

InstantClick的安装

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

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选项。

相关链接：

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

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

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

InstantClick,InstantClick加载速度

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

关于预加载InstantClick的问题解决方法

详解如何让InstantClick兼容MathJax、百度统计等

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接