提升页面加载速度的插件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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
原生JS实现微信通讯录
Jun 18 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
JavaScript的目的分析
2007/01/05 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python 装饰器深入理解
2017/03/16 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
经典而简洁的婚礼主持词
2014/03/13 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
中标通知书
2015/04/17 职场文书
贷款收入证明范本
2015/06/12 职场文书
CAD实训总结范文
2015/08/03 职场文书
安全主题班会教案
2015/08/12 职场文书
迎国庆主题班会
2015/08/17 职场文书
六年级语文教学反思
2016/03/03 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python