InstantClick预加载实现网页秒开

2018-04-15T19:03:21

InstantClick 使用了 pushState 和 Ajax 技术,这个组合被称为 Pjax。

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

这也就是为什么网络带宽不断增加,但网站并没有更快很多的原因。InstantClick是一个很小的JavaScript库,能够大大加速你的网站响应速度。

[title]InstantClick的安装[/title]

InstantClick有两个版本可以下载,直接下载压缩版的就好--链接

然后,在</body>前引用一下代码即可。例如:

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

像wordpress这种,可以选择直接加在footer.php里

PS:js的路径根据自己的修改一下即可。另外,InstantClick可能会导致出现白屏的情况。官方给出了例子,解决了和Google Adsense之间的冲突。但有网友发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。

[title]InstantClick的工作原理[/title]

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

[title]InstantClick的进度条[/title]

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

#instantclick-bar {background: #666666;}

也可以隐藏进度条:

#instantclick {display: none;}

 

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。