instantclick.js预加载实现网页秒开

instantclick.js利用预加载技术使得网站页面跳转时的速度得到大大提升,通过预加载数据替换当前的DOM结构体来达到减少页面请求返回的数据量,提供事件监听钩子函数便于完成页面初始化

所属分类 WEB

相关标签 加载加速预加载

instantclick.js加速原理

instantclick.js利用用户点击链接或者悬浮在链接上的时候,对新页面进行预加载。

使得访问新页面的时候能够实现更快速度打开甚至秒开的情况,对于用户体验有着极大的提升。

instantclick.js在页面跳转时通过对body体和title替换进行快速加载。

因此这将意味着你的网页并不是真正的跳转到那个新的页面。

所以如果你的新页面中定义了一些DOMContentLoaded或jQuery.ready()触发的初始化动作都不会进行执行

当然可以通过instantclick.js提供的监听事件来解决这个问题。

顶部进度条

instantclick.js在用户点击链接的时候,预置了一个顶部的加载条。

当然了,这个进度条进度条是假的,只是让用户意识到将要发生页面的跳转。

默认情况,进度条的颜色是#29d,可以用CSS改变配色。

#instantclick-bar
{
    background: white;
}
/*可以消失*/
#instantclick 
{
    display: none;
}

加速方案

instantclick.js提供了多种预加载的方案,需要根据您的网站场景进行选择。

  1. 悬停预加载:on mouseover (hover)默认方案
    鼠标移到超链接上就进行预加载,如果页面内容不是特别多,用户点击链接进入文章会立即显示。
    传说中的秒开就可以通过此模式实现。
  2. 点击瞬间预加载:on mousedown
    在用户鼠标点击的瞬间来预加载页面,有不错的速度提升。
  3. 悬停延时预加载: on mouseover with a delay
    如果用户将鼠标悬停你的超链接后,instantclick.js将根据你设置的时间延迟预加载。
    建议延迟是100ms和50ms。
    超过100ms实际上可能比on mousedown慢,小于50ms和on mouseover (hover)几乎无差异。

关于加速模式的选择主要根据服务器所能接受的开销能力选择即可。

预加速案例

首先,需要下载一个instantclick.js到您网站本地。

下载地址:http://instantclick.io/download

<!-- 引入JS -->
<script src="js/instantclick.min.js"></script>
<!-- data-no-instant表示该标签不进行预加载 -->
<script data-no-instant>
//选择点击瞬间预加载模式
InstantClick.init("mousedown");
</script>

instantclick.js提供了4个事件用于进行调用开发。

  • change:页面更改完毕,即click触发
  • fetch:页面开始预加载
  • receive:页面预加载完毕,hover或mousedown触发的预加载,但不一定会change,因为用户不一定click
  • wait:用户点击一个链接,但是还没有加载的页面,只有立即触发页面时不显示

这里比较常用的是change事件,前文中提到instantclick.js会使得一些新页面中定义的初始化JS操作失效,通过change就可以达到兼容。

<script data-no-instant>
InstantClick.on("change", function() {
    //比如新页面有个初始化表单数据的方法
    initFormNumber();
});
InstantClick.init();
</script>

data-no-instant:黑名单
黑名单的链接,添加一个data-no-instant属性,表示该页面不需要预加载

<a href="logOut.html" data-no-instant>注销登录</a>

如果页面有区域的多个链接都不需要预加载,可以通过指定父级标签方式实现。

<div class="conf" data-no-instant>
    <a href="logOut.html">注销登录</a>
    <a href="changePwd.html">修改密码</a>
</div>

data-instant:白名单
这个与黑名单相反,属于指明一定需要预加载的链接。
白名单优先级高于黑名单。

<div class="conf" data-no-instant>
    <!-- 注销登录链接的预加载依旧生效 -->
    <a href="maps.html" data-instan>全站地图</a>
    <a href="changePwd.html">修改密码</a>
</div>

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

CSS3通过Gradients实现渐变背景色

使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。

侧边栏下滑即将越过时动态固顶与上滑恢复

对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核