页面加载性能之Lie-Fi

当你的设备处于有网络的情况下,访问网页、打开App都很顺畅,可以随时获取到你想要的信息。

但有时候你还是会处于断网的状态,为了让App或者网站能在离线状态下使用,我们经常会把一些数据存在设备本地,这样用户依然可以体验良好。

介于 onlineoffline 之间,有这么一种状态: Lie-Fi

Lie-Fi 中文可以翻译成欺骗性网络,你的设备确实连上了无线网,但你依然不能打开网页,相信不少开发者被自己的领导这样吐槽过:“我们网站怎么打不开了,我wifi都连着呢”。试想一下你的领导现在处于办公室的封闭环境、或者其他封闭环境,wifi的热点信号弱、或者确实是宽带网络出了问题,你会进入这样的一种状态,一张图就能理解:

确实有一些方法可以来应对这种情况

一些提示

1. 检测 Lie-Fi

你的设备欺骗了你,虽然连上了网,但却上不了网。你会如何去检测?又会如何告知你的用户呢?

如果你在开发混合式App,可以尝试一下 Offline.js。为了检测断网的情况,它会定时的去ping服务器,检测连接是否正常。

2. 设置短的超时时间

向服务器发送请求的时候,你不用设置10秒或者更长的超时时间,一般用户等待3秒,就可能会离开页面了,根据自身业务情况,尽可能的设置短的超时时间。如果超时了,也要给用户展示一些有意义的信息。不要 像下面这样:

3. 设置好空状态

在你的设备与服务器交互的过程中,用户会看到什么?你要考虑是让他看0或者空的列表,就太糟糕了。

如果一个手机银行的App,此时遇到了 Lie-Fi,可能会展示成如下图所示:

我钱哪去了?钱并没有清空,只是被 Lie-Fi欺骗了。尝试一下去掉0,展示空的信息,用户的体验会更好:

宁愿留空,也不要展示错的信息

一些教训

1. 检测 Lie-Fi 浪费钱

服务器的带宽是有限的,如果花费大量的带宽让用户来ping服务器,只为了做检测,对服务器的带宽消耗是有点太大了。

考虑下针对有钱人提供这样的服务,比如vip用户,或者某些带宽便宜的的地区,或者不做检测。

2. 给请求做优先级排序毫无意义

有时候 Lie-Fi 确实是非常慢的连接。如果你一个屏幕上展示了很多种信息,你可能会考虑按信息的重要性来给发起的请求做排序,如下图:

看上去很不错,但实际上是没效果的。

改变请求发出去的顺序,并不意味着你收到响应的顺序也是这样。

三种可能的原因:

  • 请求抵达服务器的顺序不一定是同样的排序
  • 每个请求的处理时间不一样
  • 响应的数据大小也不一样

如何在我们的站点测试 Lie-Fi 的环境呢?

chrome开发者工具提供了这个功能,允许你去模拟不同的网络环境,可以使低带宽,也可以是离线。

总结

有效的利用工具,再结合我们的站点进行多种网络的测试,确保给用户提供了最佳的体验,即使是这种很差的网络情况下。

参考

  • https://www.outsystems.com/blog/lie-fi.html
  • https://developers.google.com/web/fundamentals/performance/poor-connectivity
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
系统根据B/S,即所谓的电脑浏览器/网络服务器方式,运用Java技术性,挑选MySQL作为后台系统。系统主要包含对客服聊天管理、字典表管理、公告信息管理、金融工具管理、金融工具收藏管理、金融工具银行卡管理、借款管理、理财产品管理、理财产品收藏管理、理财产品银行卡管理、理财银行卡信息管理、银行卡管理、存款管理、银行卡记录管理、取款管理、转账管理、用户管理、员工管理等功能模块。 文中重点介绍了银行管理的专业技术发展背景和发展状况,随后遵照软件传统式研发流程,最先挑选适用思维和语言软件开发平台,依据需求分析报告模块和设计数据库结构,再根据系统功能模块的设计制作系统功能模块图、流程表和E-R图。随后设计架构以及编写代码,并实现系统能模块。最终基本完成系统检测和功能测试。结果显示,该系统能够实现所需要的作用,工作状态没有明显缺陷。 系统登录功能是程序必不可少的功能,在登录页面必填的数据有两项,一项就是账号,另一项数据就是密码,当管理员正确填写并提交这二者数据之后,管理员就可以进入系统后台功能操作区。进入银行卡列表,管理员可以进行查看列表、模糊搜索以及相关维护等操作。用户进入系统可以查看公告和模糊搜索公告信息、也可以进行公告维护操作。理财产品管理页面,管理员可以进行查看列表、模糊搜索以及相关维护等操作。产品类型管理页面,此页面提供给管理员的功能有:新增产品类型,修改产品类型,删除产品类型。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值