提升页面加载速度的插件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 相关文章推荐
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
js取整数、取余数的方法
May 11 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
layui动态表头的实现代码
Aug 22 Javascript
JS实现简单的表格增删
Jan 16 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
JS闭包原理及其使用场景解析
Dec 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
php UTF8 文件的签名问题
2009/10/30 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
使javascript也能包含文件
2006/10/26 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
python中引用与复制用法实例分析
2015/06/04 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
简单了解python中的与或非运算
2019/09/18 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python中zip函数如何使用
2020/06/04 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
代办社保委托书范文
2014/10/06 职场文书
Python图片检索之以图搜图
2021/05/31 Python