使用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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 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,ajax实现分页
2008/03/27 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
基于Pytorch SSD模型分析
2020/02/18 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
培训演讲稿范文
2014/01/12 职场文书
党员干部公开承诺书
2014/03/26 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
社区元宵节活动总结
2015/02/06 职场文书