提升页面加载速度的插件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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
jQuery Ajax全解析
Feb 13 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
微信小程序实用代码段(收藏版)
Dec 17 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
Java 生成随机字符的示例代码
Jan 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
第十四节 命名空间 [14]
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
php intval函数用法总结
2019/04/14 PHP
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python创建日历实例
2014/08/21 Python
python取代netcat过程分析
2018/02/10 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
浅析Python3 pip换源问题
2020/01/06 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
Python中如何定义一个函数
2016/09/06 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
商务助理求职信范文
2014/04/20 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android