提升页面加载速度的插件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.addClass始终无效原因分析
Sep 08 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
人力资源专业推荐信
2013/11/29 职场文书
光盘行动倡议书
2014/02/02 职场文书
党员实事承诺书
2014/03/26 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
服装发布会策划方案
2014/05/22 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
PL350与SW11的比较
2021/04/22 无线电
了解Redis常见应用场景
2021/06/23 Redis
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL