使用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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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+js实现点赞功能的示例详解
2020/08/07 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
vuex的使用步骤
2021/01/06 Vue.js
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
园长自我鉴定
2013/10/06 职场文书
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
小加工厂管理制度
2014/01/21 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
党员评议思想汇报
2014/10/08 职场文书
初中政治教学反思
2016/02/23 职场文书
Python基础之元编程知识总结
2021/05/23 Python