提升页面加载速度:InstantClick

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

提升页面加载速度:InstantClick

InstantClick的安装

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

<script src="http://apps.bdimg.com/libs/instantclick/3.0.1/instantclick.min.js" data-no-instant></script>

<script data-no-instant>InstantClick.init();</script>

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

InstantClick工作原理

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

InstantClick的进度条

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

#instantclick-bar {

    background: white;

}

也可以隐藏进度条:

#instantclick {

    display: none;

}

博客已经用上,可以体验一番,我是觉得快多了~

文章来源:http://www.ezloo.com/2014/09/instantclick.html

查看 dns jquery instantclick pjax的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/2224.html

已有 14 条评论

  1. 评论怎么没了?

    1. 有丢失评论的情况?

      1. 我本来是回复:这就是传说中的预加载了,提交后没反应。

        刚刚又是这样。。。。

      2. 应该是加了这个代码之后引发了BUG。按ctrl+enter提交好像就会有问题。

      3. 我没按快捷键,我就是点提交,可能是jq提交评论,文件还没加载全吧,因为提交后页面会刷新,只是返回空了。

        还好我这次提交前有ctrl+c,不然又白打了。

      4. 问题应该已经解决了

      5. 如何解决的?

      6. 将评论区域给排除在外就好了。。。貌似点击“回复”,有时候URL上多个参数还是有点问题,继续研究

  2. 回复 小F 小F

    早就听说过它的大名,但好像会有些bug所以一直没用。
    感觉页面简单的网站没什么需要装这个。

    1. 确实是有BUG,再观察一阵子,实在不行就撤掉。

  3. 用手机浏览感觉不到快了,要用电脑体验一下。

    1. 手机确实不明显。。。

  4. php或者asp都可以吗

    1. 跟所使用的程序无关,完全就是JS提前load页面

添加新评论