instantclick.js 加速原理

instantclick.js 利用用户点击链接或者悬浮在链接上的时候，对新页面进行预加载。

使得访问新页面的时候能够实现更快速度打开甚至秒开的情况，对于用户体验有着极大的提升。

instantclick.js 在页面跳转时通过对 body 体和 title 替换进行快速加载。

因此这将意味着你的网页并不是真正的跳转到那个新的页面。

所以如果你的新页面中定义了一些 DOMContentLoaded 或 jQuery.ready()触发的初始化动作都不会进行执行。

当然可以通过 instantclick.js 提供的监听事件来解决这个问题。

顶部进度条

instantclick.js 在用户点击链接的时候，预置了一个顶部的加载条。

当然了，这个进度条进度条是假的，只是让用户意识到将要发生页面的跳转。

默认情况，进度条的颜色是#29d，可以用 CSS 改变配色。

#instantclick-bar
{
	background: white;
}
/*可以消失*/
#instantclick 
{
	display: none;
}
​

加速方案

instantclick.js 提供了多种预加载的方案，需要根据您的网站场景进行选择。

1. 悬停预加载：on mouseover (hover)默认方案
   鼠标移到超链接上就进行预加载，如果页面内容不是特别多，用户点击链接进入文章会立即显示。
   传说中的秒开就可以通过此模式实现。
2. 点击瞬间预加载：on mousedown
   在用户鼠标点击的瞬间来预加载页面，有不错的速度提升。
3. 悬停延时预加载： on mouseover with a delay
   如果用户将鼠标悬停你的超链接后，instantclick.js 将根据你设置的时间延迟预加载。
   建议延迟是 100ms 和 50ms。
   超过 100ms 实际上可能比 on mousedown 慢，小于 50ms 和 on mouseover (hover)几乎无差异。

关于加速模式的选择主要根据服务器所能接受的开销能力选择即可。

预加速案例

首先，需要下载一个 instantclick.js 到您网站本地。

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

<!-- 引入JS -->
<script src="js/instantclick.min.js"></script>
<!-- data-no-instant表示该标签不进行预加载 -->
<script data-no-instant>
//选择点击瞬间预加载模式
InstantClick.init("mousedown");
</script>
​

事件监听预回调

instantclick.js 提供了 4 个事件用于进行调用开发。

• change：页面更改完毕，即 click 触发
• fetch：页面开始预加载
• receive：页面预加载完毕，hover 或 mousedown 触发的预加载，但不一定会 change，因为用户不一定 click
• wait：用户点击一个链接，但是还没有加载的页面，只有立即触发页面时不显示

这里比较常用的是 change 事件，前文中提到 instantclick.js 会使得一些新页面中定义的初始化 JS 操作失效，通过 change 就可以达到兼容。

<script data-no-instant>
InstantClick.on("change", function() {
	//比如新页面有个初始化表单数据的方法
	initFormNumber();
});
InstantClick.init();
</script>
​

特殊属性申明

data-no-instant：黑名单
黑名单的链接，添加一个 data-no-instant 属性，表示该页面不需要预加载

<a href="logOut.html" data-no-instant>注销登录</a>
​

如果页面有区域的多个链接都不需要预加载，可以通过指定父级标签方式实现。

<div class="conf" data-no-instant>
	<a href="logOut.html">注销登录</a>
	<a href="changePwd.html">修改密码</a>
</div>
​

data-instant：白名单
这个与黑名单相反，属于指明一定需要预加载的链接。
白名单优先级高于黑名单。

<div class="conf" data-no-instant>
	<!-- 注销登录链接的预加载依旧生效 -->
	<a href="maps.html" data-instan>全站地图</a>
	<a href="changePwd.html">修改密码</a>
</div>
​