显著提高页面加载速度的神器InstantClick

in PHP with 0 comment

InstantClick可谓是前端的黑科技,利用鼠标滑到链接上到点击的时间间隙去预加载这个页面,通常这个间隙有几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

使用方法

安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如:

<script src="//yourdomain/static/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

data-no-instant的含义是,这个JS只会运行一次,需要根据自己的情况,设置
如果想避免不必要的预加载,关闭hover,启用Mousedown是个不错的选择,moursedown意味着已经点击链接

自定义进度条样式

默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色

#instantclick-bar {
    background: white;
}

也可以隐藏进度条:

#instantclick {
    display: none;
}

扩展

InstantClick 实际上将您的网站变成了一个单页面的应用,所以页面改变的时候不会重新执行DOMContentLoaded 事件。鉴于此,其它的scripts可能需要做些改变才能正确的和InstantClick协同工作。InstantClick 在页面加载周期中执行4个事件供您挂接,它们分别是change, fetch, receive, wait。

InstantClick也提供了几个事件可以设置

  • change 页面更改完毕,即click触发加载后

  • fetch 页面开始预加载

  • receive 页面预加载完毕,即:hover或mousedown触发的预加载,但不一定会change,因为用户不一定click

实例-百度统计

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
  if (isInitialLoad === false) {
    if (typeof _hmt !== 'undefined')  // support 百度统计
      _hmt.push(['_trackPageview', location.pathname + location.search]);
  }
});
InstantClick.init();
</script>

实例-谷歌GA

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
  if (isInitialLoad === false) {
    if (typeof ga !== 'undefined')  // support google analytics
        ga('send', 'pageview', location.pathname + location.search);
  }
});
InstantClick.init();
</script>

实例-Hightlight

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
   var blocks = document.querySelectorAll('pre code');
   for (var i = 0; i < blocks.length; i++) {
    hljs.highlightBlock(blocks[i]);  // support hightlignt
}
});
InstantClick.init();
</script>