提升页面加载速度的插件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 对Cookie 操作的封装小结
Dec 31 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
详解如何让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(2)
2006/10/09 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
Python每天必学之bytes字节
2016/01/28 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python调用支付宝支付接口流程
2019/08/15 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
制衣厂各岗位职责
2013/12/02 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
预备党员的自我评价
2014/03/12 职场文书
学习党章的体会
2014/11/07 职场文书
英语教学课后反思
2016/02/15 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电