[转载]利用预加载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 条评论
登录 后参与评论

相关文章

来自专栏公众号_薛勤的博客

基于Netty实现可自动渲染HTML页面的静态Web服务器

Github:https://github.com/yueshutong/JerryServer/ 码云:https://gitee.com/zyzpp/J...

45820
来自专栏魏艾斯博客www.vpsss.net

去掉 WordPress 网页图片默认链接功能

17730
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

242100
来自专栏vue学习

小程序 — 保存图片到手机相册②(用户授权等)

(1)如果用户第一次点击的时候,对弹出来的微信授权弹窗点击了拒绝,那么之后点击保存图片就没用了:

1.1K30
来自专栏运维小白

8.5 输入输出重定向

大于号,重定向 > 正确输出 >> 追加重定向 2> 错误重定向 2>> 错误追加重定向 >+2>等于&> 表示结合了正确和错误 cat 1.t...

19970
来自专栏Gaussic

IntelliJ IDEA 14 配置Tomcat8

       在网上找了找IntelliJ IDEA配置Tomcat的方法,发现大部分都显得有些过时,主要是我在配置的过程中出现了一下问题,耽误了很长的时间。现...

15720
来自专栏云计算教程系列

如何在Debian 9上安装带LAMP的WordPress

WordPress是互联网上最受欢迎的CMS(内容管理系统)。它允许您使用PHP处理在MariaDB后端轻松设置灵活的博客和网站。WordPress已经看到了令...

80250
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

24390
来自专栏pangguoming

eclipse无法解析导入 java.util

eclipse无法解析导入 java.util是因为jre配置错误。 1、点击需要导入jar的项目,右击项目属性(properties),进入到如下图界面: ?...

40550
来自专栏王磊的博客

art-template用户注册方法

应用场景nodejs Express框架,使用art-template模板引擎。 后台注册方法代码: var template = require('art-t...

41180

扫码关注云+社区

领取腾讯云代金券