- 时间：2022-07-27 15:43 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：提升页面加载速度的插件InstantClick
通常，我们为了减少DNS的查询时间，我们可以使用dns prefetch为该页面中链接的做解析，提升页面的加载速度。类似的，我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面，通常这个间隙有几百毫秒，利用[url=http://instantclick.io/]InstantClick[/url]，我们可以充分利用这几百毫秒，让网站能够瞬间显示新页面，几乎没有延迟。
[b]InstantClick的安装[/b]
安装InstantClick非常简单，只要把[url=http://instantclick.io/download]InstantClick下载[/url]过来放到某一个目录下，然后在</body>之前引用一下代码即可，例如：
<script src="//img.ezloo.com/static/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
InstantClick可能会导致出现白屏的情况，官方给出了例子，解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏，在<script>中加data-no-instant会解决这个问题，就像上面的例子一样。由于不懂JS，不知道这会不会影响统计。
[b]InstantClick工作原理[/b]
InstantClick使用pushState和Ajax([url=https://github.com/defunkt/jquery-pjax]pjax[/url])来实现，只替换<body>和头部的<title>，浏览器不必重新解析编译页面，这样在页面跳转的过程中，浏览器不会闪一下白屏，看上去页面在瞬间就加载完成了。
[b]InstantClick的进度条[/b]
默认情况下，InstantClick在载入页面的时候，会在页面的顶部显示一个进度条，默认的颜色是#29d，你可以更改颜色：
#instantclick-bar {
background: white;
}
也可以隐藏进度条：
#instantclick {
display: none;
}
[b]WordPress插件[/b]
如果你使用的是WordPress博客，你可以搜索安装InstantClick插件[url=https://wordpress.org/plugins/instantclick/]https://wordpress.org/plugins/instantclick/[/url]，安装完成之后，在WordPress后台的设置菜单下，会增加一个InstantClick选项。
[img]http://files.jb51.net/file_images/article/201709/2017912163205316.png?2017812163221[/img]
[b]相关链接：[/b]
测试鼠标点击延迟：[url=http://instantclick.io/click-test]http://instantclick.io/click-test[/url]
让InstantClick兼容百度统计、Google Analytics：[url=http://www.1sucai.cn/hack/123521.html]http://www.1sucai.cn/hack/123521.html[/url]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...