在以前，我們經常可能需要用到獲取或者監聽當前的網絡狀態，並根據當前的網絡狀態做一些對應的操作，比如網絡慢的時候我們加載圖片質量有所降低的圖片，網絡狀態良好的時候加載更清晰的圖片，再比如當網絡切換，比如從網絡狀態改變的時候給用戶一些提示，但礙於瀏覽器原生並沒有提供相關的API，所以我們只能另辟蹊徑，比如弄一個通用測速接口，通過計算請求從發起到結束的時間來判斷當前的網速，這種方式雖然看起來能實現檢測當前的網絡狀態，但效率不高，不能實時反饋，有延遲，而且結果也並不是那么准確，好消息是Network Information API來了，通過Network Information API我們就可以輕易的獲取和監聽當前的網絡狀態，下面介紹一下使用方式。
獲取和監聽網絡狀態主要用的是navigator中的connection屬性，首先我們將navigator.connection打印出來：
從上圖中，我們可以看到下navigator.connection有downlink，effectiveType，onchange，rtt，saveData幾個屬性，那么他們分別代表什么呢？
1、downlink 估算的下行速度/帶寬
2、effectiveType 當前的網絡連接類型
其中effectiveType的取值可能是'slow-2g'、'2g'、'3g'或者'4g'。在網速慢的時候，此功能可以讓你通過提供較低質量的資源來提高頁面的加載速度，通過它獲得的網絡類型是最接近的蜂窩網絡連接類型（比如 2G），即使你實際連接的是WiFi，但你的有效網絡類型可能是2G或者3G。
3、onchange 看命名我們就知道這是一個回調函數，在網絡狀態發生改變后執行
4、rtt 估算的往返時間
5、saveData 打開/請求數據保護模式
使用方式
首先我們可以直接獲取當前的網絡狀態：
|
1
|
console.log(navigator.connection.effectiveType); // slow-2g/2g/3g/4g
|
監聽網絡狀態的改變：
|
1
2
3
4
5
6
7
8
9
|
onConnectionChange() {
const { rtt, downlink, effectiveType, saveData } = navigator.connection;
console.log(`有效網絡連接類型: ${effectiveType}`);
console.log(`估算的下行速度/帶寬: ${downlink}Mb/s`);
console.log(`估算的往返時間: ${rtt}ms`);
console.log(`打開/請求數據保護模式: ${saveData}`);
}
navigator.connection.addEventListener('change', onConnectionChange);
|
我們可以通過瀏覽器開發者工具中network的模擬網絡功能來快速測試網絡類型的改變。
怎么樣，是不是很驚喜？不過有點遺憾的是到目前為止，不是所有瀏覽器都支持這一新特性，下面我們看一下這個新特性的瀏覽器支持情況
可以看出IE是不支持的，Edge支持情況不明，到目前為止Safari也還暫時不支持這一特性，所以依然路遙遙，還有很多路需要走，但是並不是我們就不能使用這一特性了，在前端開發中有一個名詞叫“優雅降級”，我們可以在支持這一特性的瀏覽器使用，不支持的情況下還是使用我們之前那種比較笨的辦法。