专栏首页繁花云[转载]利用预加载InstantClick.js提升页面打开速度

[转载]利用预加载InstantClick.js提升页面打开速度

通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。 InstantClick的安装 安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如:

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

也可以使用CDN导入JS文件(这里使用的是bootcdn)

<script data-no-instant src="https://cdn.bootcss.com/instantclick/3.0.1/instantclick.min.js"></script>

InstantClick可能会导致出现白屏的情况,官方给出了例子,解决了和Google Adsense之间的冲突。我发现百度统计也会导致白屏,在<script>中加data-no-instant会解决这个问题,就像上面的例子一样。 InstantClick工作原理 InstantClick使用pushState和Ajax(pjax)来实现,只替换<body>和头部的<title>,浏览器不必重新解析编译页面,这样在页面跳转的过程中,浏览器不会闪一下白屏,看上去页面在瞬间就加载完成了。 InstantClick的进度条 默认情况下,InstantClick在载入页面的时候,会在页面的顶部显示一个进度条,默认的颜色是#29d,你可以更改颜色:

#instantclick-bar {
    background: white;
}

也可以隐藏进度条:

#instantclick {
    display: none;
}

来源地址:https://www.codeke.cn/article/99

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [教程] Centos7下搭建pterodactyl翼龙游戏面板详解

    翼龙面板,英文全名Pterodactyl,译为“翼龙”,以下文章均简称为翼龙面板。

    繁花云
  • [备忘]liunx下shell脚本通过IP授权方法

    IP=$(curl http://ip.6655.com/ip.aspx -x122.225.117.181:80)

    繁花云
  • [软件]集成kvm驱动版PE及KVM驱动包

    http://coredlserver.s-api.yunvm.com/xen.zip

    繁花云
  • 实现微信小程序返回多级页面

    沈唁
  • HoVPN技术

    在解决企业互连和提供各种新业务方面,MPLS L3VPN越来越受到网络运营商的重视,成为 IP网 络运营商提供增值业务的重要手段。目前,虽然 MPLS L3VP...

    网络技术联盟站
  • 机器学习研究者的养成指南,吴恩达建议这么读论文

    近日,一位网友在 Reddit 上发帖提问:「那些高效的机器学习研究者,都有什么样的习惯?」

    CV君
  • MongoDB基本操作

    上篇文章我们简单介绍了MongoDB安装以及启动命令,本文我们来看看基本的增删改查,对MongoDB有一个直观的认识。 ---- 客户端安装配置 上篇文章我们提...

    江南一点雨
  • 二叉排序树和平衡二叉树

    二叉排序树又称二叉查找树或二叉搜索树。 它一棵空树或者是具有下列性质: (1)若左子树不空,则左子树上所有结点的值均小于它的根结点的值; (2)若右子树不空,...

    用户1215536
  • Exception和Error有什么区别?

    Exception 和 Error 都是继承了 Throwable 类,在 Java 中只有 Throwable 类型的实例才可以被抛出(throw)或者捕获(...

    葆宁
  • 教你如何使用QBDI动态二进制检测框架

    QBDI全名为QuarkslaB Dynamicbinary Instrumentation,它是一个模块化的跨平台以及跨架构的DBI框架。该工具目前支持Lin...

    FB客服

扫码关注云+社区

领取腾讯云代金券