IT博客汇 | InstantClick 网页预加载让秒开不再是梦

InstantClick 网页预加载让秒开不再是梦

Mike发表于 2015-03-15 06:00:00

前段时间当我在使用ActionBox主题（即将发布）的时候，大家是不是感觉微狐网的各个页面几乎是秒开？那是因为我在Jimmy的建议下采用了一个叫instantclick的JS库，现在分享给大家。

这个JS库适用于所有现代网页，当然本文着重介绍Typecho下的使用方法。

尽管网络带宽不断增加，但网站并没有更快很多。这是因为最大的瓶颈在于页面加载的延迟。在访问者点击一个链接之前，鼠标会悬停在链接上面，这两个事件之间通常有200ms~300ms的间隔，InstantClick 利用这个时间间隔预加载页面。这样当你点击页面的时候，其实页面已经加载到本地了，呈现当然也就会很快。

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

项目主页：传送门

通用：初始化InstantClick

这样全站链接就实现了预加载，使用Chrome来感受下你网站的蜕变吧。

注意：InstantClick对新窗口打开的a标签是不触发预加载效果的，还有在带有data-no-instant参数的标签包裹下的a标签也不会触发预加载效果（也就是黑名单机制，下文详细介绍）。

自带进度条设置

Instantclick支持进度条，通过调整#instantclick-bar的Background实现颜色修改。

#instantclick-bar {
background: white;
}

当然不想用也可以关闭它。

#instantclick {
display: none;
}

黑名单机制

InstantClick默认采用黑名单机制，用来解决可能会导致出现冲突的情况，如：Google AD、多说评论等。

在

InstantClick 网页预加载 让秒开不再是梦

通用：初始化InstantClick

自带进度条设置

黑名单机制

Typecho 0.9

InstantClick 网页预加载让秒开不再是梦