提升页面加载速度的插件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 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
Angular 多模块项目构建过程
Feb 13 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+mysql写的留言本
2006/10/09 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python实现绘制树枝简单示例
2014/07/24 Python
Python 的内置字符串方法小结
2016/03/15 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
python实现定时发送qq消息
2019/01/18 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Django 限制访问频率的思路详解
2019/12/24 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书