快捷導(dǎo)航

JavaScript實(shí)現(xiàn)獲取設(shè)備網(wǎng)絡(luò)連接信息

更新時(shí)間：2023年05月25日 09:36:59 作者：JetTsang

作為前端開(kāi)發(fā)，做好用戶體驗(yàn)是很重要的，日常開(kāi)發(fā)中我們經(jīng)?？梢杂龅接脩艟W(wǎng)速慢導(dǎo)致靜態(tài)資源加載慢，從而給影響用戶體驗(yàn)，所以本文來(lái)和大家分享一個(gè)有趣的API，可以實(shí)現(xiàn)獲取網(wǎng)絡(luò)信息

前言

作為前端開(kāi)發(fā)，做好用戶體驗(yàn)是很重要的，日常開(kāi)發(fā)中我們經(jīng)常可以遇到用戶網(wǎng)速慢導(dǎo)致靜態(tài)資源加載慢，從而給影響用戶體驗(yàn)。這里有一種優(yōu)化思路，我們可以通過(guò)JS來(lái)獲取網(wǎng)絡(luò)信息，比方說(shuō)使用的是WI-FI還是蜂窩，下載速度大致是多少呀？來(lái)達(dá)到優(yōu)化的目的，下面介紹這樣一個(gè)API

介紹

Navigator.connection是一個(gè)只讀的對(duì)象，它會(huì)提供一個(gè)一個(gè) NetworkInformation 對(duì)象來(lái)獲取設(shè)備的網(wǎng)絡(luò)連接信息。例如用戶設(shè)備的當(dāng)前帶寬或連接是否被計(jì)量，這可以用于基于用戶的連接來(lái)選擇高清晰度內(nèi)容或低清晰度內(nèi)容。

使用方法

const connectionInfo:NetworkInformation = navigator.connection

NetworkInformation定義

type NetworkInformation = {
    readonly downlink:number  // Mbps
    readonly effectiveType: EffectiveConnectionType
    onchange: EventHandler
    readonly rtt:number // round trip time --> ms
}
// 每一個(gè)定義的枚舉類型都有對(duì)應(yīng)的參數(shù)范圍的要求
enum EffectiveConnectionType {
  "2g",
  "3g",
  "4g",
  "slow-2g"
};

How to use

// Get the connection type. 
var type = navigator.connection.type; 
// Get an upper bound on the downlink speed of the first network hop
var downlink = navigator.connection.downlink; 
function changeHandler(e) { 
// Handle change to connection here. 
} 
// Register for event changes. 
navigator.connection.onchange = changeHandler;
// Alternatively. 
navigator.connection.addEventListener('change', changeHandler);

這是一個(gè)實(shí)驗(yàn)性的API，它的適用范圍：

在項(xiàng)目中使用

Vue

// 在組件掛載完畢
onMounted(() => {
    const effectiveType = navigator.connection.effectiveType
    switch (effectiveType) {
        case '4g':
            // 加載高質(zhì)量資源
            this.imgSrc = higherSrc
            break;
        case '3g':
            // 加載稍低質(zhì)量資源
            this.imgSrc = lowerSrc
            break;
        case '2g':
            // ...
            break;
        default:
            //...
            break;
    }
})

React

// 在組件掛載完畢后，只需執(zhí)行一次
useEffect(()=>{
    const effectiveType = navigator.connection.effectiveType
    switch (effectiveType) {
        case '4g':
            // 加載高質(zhì)量資源
            setImgsrc(higherSrc)
            break;
        case '3g':
            // 加載稍低質(zhì)量資源
            setImgsrc(lowerSrc)
            break;
        case '2g':
            // ...
            break;
        default:
            //...
            break;
    }
},[])

總結(jié)

這個(gè)API可以根據(jù)用戶的網(wǎng)速，來(lái)加載對(duì)應(yīng)質(zhì)量的資源，從而為用戶帶來(lái)更好的體驗(yàn)，需要注意的是，這是一個(gè)實(shí)驗(yàn)性質(zhì)的API，支持的瀏覽器版本有限，使用的時(shí)候可以作為漸進(jìn)增強(qiáng)來(lái)提高用戶體驗(yàn)。