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

时间:2021-08-22  来源:鼠标特效  阅读:

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

InstantClick的安装

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

<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,不知道这会不会影响统计。

InstantClick工作原理

InstantClick使用pushState和Ajax(pjax)来实现,只替换和头部的,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。 </p> <p> <strong>InstantClick的进度条</strong> </p> <p> 默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色: </p> <pre class="brush:css;">#instantclick-bar { background: white; }</pre> <p> 也可以隐藏进度条: </p> <pre class="brush:css;">#instantclick { display: none; }</pre> <p> <strong><a href="http://www.bbyears.com/clist-113-1.html" target="_blank" class="keylink">WordPress</a>插件</strong> </p> <p> 如果你使用的是<a href="http://www.bbyears.com/clist-113-1.html" target="_blank" class="keylink">WordPress</a>博客,你可以搜索安装InstantClick插件https://<a href="http://www.bbyears.com/clist-116-1.html" target="_blank" class="keylink">word</a>press.org/plugins/instantclick/,安装完成之后,在WordPress后台的设置菜单下,会增加一个InstantClick选项。 </p> <p style="text-align:center;"> <img src="http://img.111cn.net/attachment/art/147237/59ce12be6f.png?2017812163221" alt="" width="762" height="730" /> </p> <p> <strong>相关链接:</strong> </p> <p> 测试鼠标点击延迟:http://instantclick.io/click-test </p> 让InstantClick兼容百度统计、<a href="http://www.bbyears.com/clist-191-1.html" target="_blank" class="keylink">Google</a> Analytics:http://www.jb51.net/hack/123521.html

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

http://m.bbyears.com/wangyetexiao/137424.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新