提升页面加载速度的插件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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php GD绘制24小时柱状图
2008/06/28 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
聊聊python中的异常嵌套
2020/09/01 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
思想品德课教学反思
2014/02/10 职场文书
电气自动化求职信
2014/06/24 职场文书
收款委托书
2014/10/14 职场文书
打架检讨书
2015/01/27 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
MySQL去除密码登录告警的方法
2022/04/20 MySQL
MySQL sql模式设置引起的问题
2022/05/15 MySQL
python中validators库的使用方法详解
2022/09/23 Python