提升页面加载速度的插件InstantClick


Posted in Javascript onSeptember 12, 2017

通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

InstantClick的安装

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

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

InstantClick可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。由于不懂JS,不知道这会不会影响统计。

InstantClick工作原理

InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。

InstantClick的进度条

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

#instantclick-bar {
  background: white;
}

也可以隐藏进度条:

#instantclick {
  display: none;
}

WordPress插件

如果你使用的是WordPress博客,你可以搜索安装InstantClick插件https://wordpress.org/plugins/instantclick/,安装完成之后,在WordPress后台的设置菜单下,会增加一个InstantClick选项。

提升页面加载速度的插件InstantClick

相关链接:

测试鼠标点击延迟:http://instantclick.io/click-test

让InstantClick兼容百度统计、Google Analytics:https://3water.com/hack/123521.html

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

Javascript 相关文章推荐
js中arguments的用法(实例讲解)
Nov 30 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
JS排序之快速排序详解
Apr 08 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 #Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 #Javascript
VueJs组件prop验证简单介绍
Sep 12 #Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 #Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 #Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 #Javascript
JavaScript中递归实现的方法及其区别
Sep 12 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
PHP 加密解密内部算法
2010/04/22 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
js单例模式的两种方案
2013/10/22 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JS中的多态实例详解
2017/10/15 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
Python中的变量和作用域详解
2016/07/13 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
python队列Queue的详解
2019/05/10 Python
Django 多环境配置详解
2019/05/14 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
网络信息安全承诺书
2014/03/26 职场文书
绵山导游词
2015/02/05 职场文书
护士自我推荐信范文
2015/03/24 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2015年库房工作总结
2015/04/30 职场文书