提升页面加载速度的插件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对象模型-执行模型
Apr 28 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
antd design table更改某行数据的样式操作
Oct 31 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的库,结果发现很多东西
2006/12/31 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Python及Django框架生成二维码的方法分析
2018/01/31 Python
使用Python写一个小游戏
2018/04/02 Python
python多进程读图提取特征存npy
2019/05/21 Python
python3字符串操作总结
2019/07/24 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python代码实现图书管理系统
2020/11/30 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
面试通知邮件
2015/04/20 职场文书
开会通知
2015/04/20 职场文书
获奖感言一句话
2015/07/31 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
Python日志模块logging用法
2022/06/05 Python