• 参考网站 http://t.zoukankan.com/songfengyang-p-15675649.html

• 通过 Network Information API 我们可以轻易获取和监听当前网络状态

window.navigator.connection = {
    downlink: 6.8, // 下行速率/带宽
    effectiveType: "4g", // 网络类型
    onchange: null, // 回调函数，监听网络状态发生改变
    rtt: 150, // 往返时间 ms
    saveData: false // 打开/关闭请求数据保护模式
}

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);

• 可以通过浏览器开发者工具来模拟弱网环境

  • 

• 浏览器支持情况

  •