页面加载性能之Lie-Fi

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

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

介于 online 和 offline 之间，有这么一种状态: 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