临睡前照例浏览一圈订阅,发现好文《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实现功能更容易,可在后台插件页面搜索后安装。
看上去不错,不过有可能浪费流量吧
@瑾瑜只要不是恶意刷流量,就没事。毕竟带来的体验很好,利大于弊。
这个思路很好啊,已经用了吗?没有对比感觉不出来,反正点击反应是挺快的。特别是我喜欢在链接上hover很久....
@兔二爷+|+理性的感性生活已经部署了,自我感觉确实快了。 👿