頁面加載性能之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...