页面加载性能之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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值