提升页面加载速度的插件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 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
token 机制和实现方式
Dec 15 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
详解如何让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 购物车的例子
2009/05/04 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
python 实现插入排序算法
2012/06/05 Python
python解析xml文件实例分享
2013/12/04 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python学生信息管理系统
2018/03/13 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
基于python监控程序是否关闭
2020/01/14 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python是怎么被发明的
2020/06/15 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
培训班主持词
2014/03/28 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
企业员工集体活动方案
2014/08/17 职场文书
学校运动会通讯稿
2015/07/18 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python