使用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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
layui复选框限制选择个数的方法
Sep 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
跟老齐学Python之重回函数
2014/10/10 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Django中信号signals的简单使用方法
2019/07/04 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
人力资源求职信
2014/05/25 职场文书
英语系毕业生求职信
2014/07/13 职场文书
反腐倡廉观后感
2015/06/08 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python