提升页面加载速度的插件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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
10个实用的脚本代码工具
May 04 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
Java Varargs 可变参数用法详解
Jan 28 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php设置编码格式的方法
2013/03/05 PHP
php实现cookie加密的方法
2015/03/10 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python新手学习使用库
2020/06/11 Python
python中元组的用法整理
2020/06/15 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang