使用InstantClick.js让页面提前加载200ms


Posted in Javascript onSeptember 12, 2017

前言

加速网站加载的方式有很多,在@Roc的推荐下,我找到了这个InstantClick.js,仔细查看了官网的英文文档,发现InstantClick.js有个很好的实现思路(how-it-works)。

在访问者点击一个链接之前( 鼠标测试:test yourself here ):

  • 悬停 hover (hover->click之间200ms左右)
  • 鼠标按下 Mousedown (Mousedown->click之间100ms左右),
  • Touchstart 手机触碰

这两个事件之间通常有200ms的间隔,InstantClick 利用这个时间间隔预加载页面。这样当你点击页面的时候,其实页面已经加载到本地了,呈现当然也就会很快。

当然InstantClick 也使用了 Pjax: pushState 和 Ajax 技术

同时我试用了下,的确效果不错。如果你的博客需要实现Pjax,InstantClick会是个不错的选择。

使用方法

下载instantclick.js。instantclick.min.js仅仅2.5Kb,很小

使用

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

注:

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

查看效果

打开chrome console,查看network视图,会在每次hover时,都可以先加载页面,在click时展示结果页面。

由于没有一个好的截动画软件,所以没有gif动画展示

扩展

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

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

实例

因为使用ajax,所以google ga不会统计PV,所以增加change方法

<script src="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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解javascript中defer的作用
Dec 11 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
VueJs组件prop验证简单介绍
Sep 12 #Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 #Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 #Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 #Javascript
JavaScript中递归实现的方法及其区别
Sep 12 #Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 #Javascript
React中jquery引用的实现方法
Sep 12 #jQuery
You might like
PHP环境搭建最新方法
2006/09/05 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue中如何使用ztree
2018/02/06 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python实现连连看游戏
2020/02/14 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
早读迟到检讨书
2014/01/24 职场文书
同事吵架检讨书
2014/02/05 职场文书
2014年情人节活动方案
2014/02/16 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
外联部演讲稿
2014/05/24 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
python blinker 信号库
2022/05/04 Python