提升页面加载速度的插件InstantClick

转载  更新时间:2017年09月12日 16:31:34   作者:Jackie   我要评论

本篇文章主要介绍了提升页面加载速度的插件InstantClick,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

通常,我们为了减少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选项。

相关链接:

测试鼠标点击延迟:http://instantclick.io/click-test

让InstantClick兼容百度统计、Google Analytics://www.jb51.net/hack/123521.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • BootStrop前端框架入门教程详解

    BootStrop前端框架入门教程详解

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。这篇文章主要介绍了BootStrop前端框架入门教程详,需要的朋友可以参考下
    2016-12-12
  • 前端开发不得不知的10个最佳ES6特性

    前端开发不得不知的10个最佳ES6特性

    ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中。下面通过本文给大家分享前端开发不得不知的10个最佳ES6特性,感兴趣的朋友参考下吧
    2017-08-08
  • js拦截alert对话框另类应用

    js拦截alert对话框另类应用

    alert对话框的使用给用户带来了很多的方便,而有些时候不希望让它存在,接下来介绍如何使用js拦截alert对话框,感兴趣的朋友可以了解下
    2013-01-01
  • javascript实现简单的ajax封装示例

    javascript实现简单的ajax封装示例

    这篇文章主要介绍了javascript实现简单的ajax封装功能,结合实例形式分析了ajax基本功能与操作实现技巧,需要的朋友可以参考下
    2016-12-12
  • html+javascript+bootstrap实现层级多选框全层全选和多选功能

    html+javascript+bootstrap实现层级多选框全层全选和多选功能

    想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里,接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能,需要的朋友参考下
    2017-03-03
  • document.forms用法示例介绍

    document.forms用法示例介绍

    forms 返回一个集合包含了了当前文档中的所有form元素,下面通过示例为大家介绍下document.forms用法,需要的朋友可以参考下
    2014-06-06
  • 第九章之路径分页标签与徽章组件

    第九章之路径分页标签与徽章组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍路径分页标签与徽章组件,感兴趣的朋友一起学习吧
    2016-04-04
  • js实现图片轮播效果

    js实现图片轮播效果

    这篇文章主要介绍了js实现图片轮播效果的相关资料,需要的朋友可以参考下
    2015-12-12
  • javascript生成不重复的随机数

    javascript生成不重复的随机数

    这篇文章主要介绍了javascript在指定范围内生成不重复的随机数的方法和相关实例,有需要的小伙伴可以参考下。
    2015-07-07
  • 原生JS实现循环Nodelist Dom列表的4种方式示例

    原生JS实现循环Nodelist Dom列表的4种方式示例

    这篇文章主要介绍了原生JS实现循环Nodelist Dom列表的4种方式,结合具体实例形式分析了javascript循环遍历Nodelist Dom列表的常用操作技巧,需要的朋友可以参考下
    2018-02-02

最新评论