1.判断用户的网络质量
function onConnectionChange(){
const { rtt,downlink,effectiveType,saveData } = navigator.connection;
console.log(`有效网络连接类型:${effectiveType}`); // 2g 3g 4g
console.log(`估算的下行速度/带宽:${downlink}Mb/s`);
console.log(`估算的往返时间:${rtt}ms`);
console.log(`打开/请求数据保护模式:${saveData}`);
};
navigator.connection.addEventListener('change',onConnectionChange);
注意：如果用户连接的是wifi、5G、4G，控制台打印的都是4g 切成离线模式的话，打印的也是4g，但是它的带宽变为0了
可以在控制台Network通过切换网络状态，在控制台打印出当前的网络质量信息
2.应用场景
需求：根据当前用户使用的网络类型(质量)，给用户的体验做一个降级
完整实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 需求：网络好的话，页面加载视频；网络差的话，页面加载图片 -->
<div class="home">
<div>网络状态判断</div>
<div id="fast">
<video src="" width="500px" height="500px" class="theatre" autoplay muted playsinline control>
<source src="./image/test.mp4" type="video/mp4">
</video>
</div>
<div id="slow">
<img class="theatre" src="./image/1.jpg" alt="">
</div>
</div>
<script>
let domId = "fast";
if(/\slow-2g|2g|3g/.test(navigator.connection.effectiveType)){
domId = "slow";
}else{
domId = "fast"
};
document.getElementById(domId).style.display = "block";
// 前端如何判断用户的网络质量，浏览器原生的API：navigator.connection
function onConnectionChange(){
const { rtt,downlink,effectiveType,saveData } = navigator.connection;
console.log(`有效网络连接类型:${effectiveType}`); // 2g 3g 4g（如果用户连接的是wifi、5G、4G，这里打印的都是4g）
console.log(`估算的下行速度/带宽:${downlink}Mb/s`);
console.log(`估算的往返时间:${rtt}ms`);
console.log(`打开/请求数据保护模式:${saveData}`);
}
navigator.connection.addEventListener('change',onConnectionChange);
</script>
</body>
</html>
