临睡前照例浏览一圈订阅,发现好文《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 实现功能更容易,可在后台插件页面搜索后安装。

共有 4 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注