竹炉山房

临睡前照例浏览一圈订阅，发现好文《InstantClick.js · 让页面提前加载 200ms》，对我等速度不快插件不少的博客来说是莫大福音。

主要原理：

读者在点击一个链接之前，一般有：

• 悬停 hover（hover→click 之间 200ms 左右）
• 鼠标按下 Mousedown（Mousedown→click 之间 100ms 左右）
• Touchstart 手机触碰

鼠标测试页面：这里。

两个事件之间>200ms 的间隔（其实不止，除非你天天玩星际争霸鼠标定位超准，否则在 400ms 左右很正常）被 InstantClick 利用预加载页面，当读者点击页面的时候，其实页面已经加载到本地了，感觉就会非常快。

实现方法：

1、下载地址：instantclick.min.js（2.5Kb）[已失效]，放在 template 下的 js 目录中

2、在 footer.php 中插入

<!--instantclick.js-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga('send', 'pageview') */
InstantClick.on('change', function() {
  ga('send', 'pageview', location.pathname + location.search);
});
InstantClick.init();
</script>

3、经测试确实有效。有兴趣验证效果的可以通过谷歌 Chrome 或者 Firefox 的 firebug、Opera 的 Console 等查看 network timeline。

至于原文中其它细节可以忽略。

2015/12/20

插件 instantclick 实现功能更容易，可在后台插件页面搜索后安装。