提升页面加载速度的插件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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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
Thinkphp单字母函数使用指南
2016/05/08 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python异常处理总结
2014/08/15 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
python实现自动解数独小程序
2019/01/21 Python
python如何统计代码运行的时长
2019/07/24 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
大学生思想汇报范文
2013/12/31 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
导游词300字
2015/02/13 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
入党转正介绍人意见
2015/06/03 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Python中的tkinter库简单案例详解
2022/01/22 Python
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers