页面加载性能之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/bl...
• https://developers.google.com...