be my hero

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

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

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

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

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

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头像