Ryongyon!

这世界上假绅士太多,缺少训练有素的流氓

· 实践教程 · · 14131次浏览

InstantClick - 提升页面加载速度

前言

通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟(千万不要小看这几百毫秒)。本站目前已经使用了InstantClick,当你从首页打开本站的文章的时候,应该已经体验到飞快的速度了。如果你想要知道InstantClick使用前 使用后的对比,可以到这个网站测试:很神奇的传送门

InstantClick的安装

安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</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,不知道这会不会影响统计。

InstantClick工作原理

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

InstantClick的进度条

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

#instantclick-bar {
    background: white;
}

也可以隐藏进度条:

#instantclick {
    display: none;
}
评论 (10条) 取消回复
  1. 以前用过,但是用了之后,评论里面,点回复按钮没有反应?不知道怎么回事?

    回复
    1. 拾叁 博主
      @山小炮

      InstantClick很强大,这点不可否认。遗憾的是InstantClick与很多js并不兼容,因为很多js都需要回调参数啥的,所以想要完美用上InstantClick必须做一些调整,比如如果你用InstantClick的话 谷歌的访问统计就会出问题,解决方法在网上已经有了,就是类似那样的操作去兼容其它js。说是这么说 不过操作起来比较麻烦,所以我的主题就没有用InstantClick?

      回复
      1. @拾叁

        我也是这么想的,其实网站访问不是很慢的话也没必要非用它。

        回复
  2. 博主,页面加载不完全怎么办?比如多说,我的多说访客、评论框留言等都没加载,刷新之后就加载了

    回复
    1. 拾叁 博主
      @DIAN

      过段时间会写一篇解决方法的文章喔,目前在学校军训呢!望谅解

      回复
      1. @拾叁

        1.度娘了,js加data-no-instant禁用
        2.菜单也加载不了,不准备用了

        回复
  3. 明天弄一下这个

    回复
  4. 朋友,交换链接吗?

    回复
    1. 拾叁 博主
      @namecheap

      联系邮箱哦

      回复
  5. :grin: 博客简介大方,赞一个

    回复