提升页面加载速度的插件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:https://www.jb51.net/hack/123521.html

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

相关文章

  • ES6 proxy和reflect的使用方法与应用实例分析

    ES6 proxy和reflect的使用方法与应用实例分析

    这篇文章主要介绍了ES6 proxy和reflect的使用方法,结合具体实例形式分析了ES6 proxy和reflect基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 详解JavaScript的另类写法

    详解JavaScript的另类写法

    这篇文章主要介绍了详解JavaScript的另类写法的相关资料,需要的朋友可以参考下
    2016-04-04
  • js loading加载效果实现代码

    js loading加载效果实现代码

    js loading加载效果实现代码,这个是在asp.net下的输出j代码,实现页面加载效果。
    2009-11-11
  • Javascript Promise用法详解

    Javascript Promise用法详解

    这篇文章主要介绍了Javascript Promise用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JavaScript添加随滚动条滚动窗体的方法

    JavaScript添加随滚动条滚动窗体的方法

    这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-02-02
  • 数据排序谁最快(javascript中的Array.prototype.sort PK 快速排序)

    数据排序谁最快(javascript中的Array.prototype.sort PK 快速排序

    今天在51js论坛中看到一个网友发布了一个javasctipt实现的快速排序的算法,前些日子工作中也涉及到javasctipt中数据排序的应用,当时为了提高排序速度,使用的也是快速排序的算法。
    2007-01-01
  • JS立即执行的匿名函数用法分析

    JS立即执行的匿名函数用法分析

    这篇文章主要介绍了JS立即执行的匿名函数,结合实例形式分析了;(function() {})();相关原理、使用技巧及操作注意事项,需要的朋友可以参考下
    2019-11-11
  • JavaScript的Proxy可以做哪些有意思的事儿

    JavaScript的Proxy可以做哪些有意思的事儿

    这篇文章主要介绍了JavaScript的Proxy可以做哪些有意思的事儿,Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为 (在文档中被称为traps,我觉得可以理解为一个针对对象各种行为的钩子),,需要的朋友可以参考下
    2019-06-06
  • Bootstrap3 图片(响应式图片&图片形状)

    Bootstrap3 图片(响应式图片&图片形状)

    这篇文章主要介绍了 Bootstrap3 图片 响应式图片和图片形状的相关资料,需非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • react-router-dom 嵌套路由的实现

    react-router-dom 嵌套路由的实现

    这篇文章主要介绍了react-router-dom 嵌套路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论