发现一个让网站访问提速的神器-INSTANTCLICK

2016-05-25 13:59:42 / 4446 / 默认分类

今天在一个博客模板开发网站里,正好看到的,我觉得我很有必要分享一下,真是太棒了

首先,我看到这些模板演示访问的特别快,我虽然不明白是怎么回事,但是感觉就是好厉害的样子!

然后就是看介绍,突然一个我看不懂的英文字母出现在我的视野中

INSTANTCLICK?这个是神马?赶紧找了度娘打了一炮

果然找到了相关的介绍

以下来自网络摘抄

尽管网络带宽不断增加,但网站并没有更快很多。这是因为最大的瓶颈在于页面加载的延迟。InstantClick 是一个很小的 JavaScript 库,大大加速你的网站响应速度。

在访问者点击一个链接之前,鼠标会悬停在链接上面,这两个事件之间通常有200ms~300ms的间隔,InstantClick 利用这个时间间隔预加载页面。这样当你点击页面的时候,其实页面已经加载到本地了,呈现当然也就会很快。

看到这个,我当然不能忍了,赶紧下载下来,使用了一下,果然,很快!

因为我是个前端渣渣,真是没了解过pjax,以及利用pjax制作出来的INSTANTCLICK

不过不影响我对它的使用,INSTANTCLICK就是一个小巧的js文件,有压缩版和开发版,完全免费

这里给他们的官网打下广告

http://instantclick.io

下载地址:http://instantclick.io/download

英文的网站

可以直接下载js文件的,这里就不多做介绍了,看不懂英文的小伙伴,自己翻译一下,实在不会,你查看本博客的源代码,里面也有这个js类文件的,你保存一下就可以了

下面讲一下使用的方法,其实使用起来也是非常方便的

<script type="text/javascript" src="js/instantclick.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script>

此外这里要注意一点问题,就是js加载和冲突问题,比如第三方评论插件统计插件,这样是非常容易出问题的,解决的方法,这里贴出来看看,如果解决不了,还是找位大神,或者不要用了,我在使用的时候就出现了一些问题
正常加载刷新js

语句本身的data-no-instant参数意思就是不处理,并且正常刷新这部分结构。所以如果要其他js在InstantClick下起作用,必须将js本身刷新,可以把代码写入instantclick.min.js里面,也可以带上data-no-instant参数独立引用。如果不将自己的js写入instantclick.min.js内,就要利用它的四个参数来重新载入,参考:http://instantclick.io/scripts

InstantClick.on('change', function() {
// 回调
});
InstantClick.init();
a标签

InstantClick对新窗口打开的a标签是不处理的,还有在带有data-no-instant参数的标签包裹下的a标签也不会处理。

最后总结:data-no-instant属性是用来避免instantclick在页面切换时对该元素重复加载(意思就是按正常刷新)。它可以用在script、style标签中,也能放在a标签中,表示该链接将使用正常方式打开而不用instantclick加速,但对于div标签是没有用的,这一点必须知晓。


至于演示吗?

本博客就是演示

知道的大神还请无视我这篇文章,不知道的,就赶紧来试一试!

个人感觉还是非常不错的!
gravatar头像