网络状态的智能感知：WebKit 支持 Network Information API 深度解析

// 检查网络状态
if ('connection' in navigator) {
    console.log('网络状态：', navigator.connection);
    console.log('下行带宽：', navigator.connection.downlink);
    console.log('effectiveType：', navigator.connection.effectiveType);
    console.log('rtt：', navigator.connection.rtt);
} else {
    console.log('Network Information API 不可用');
}
 
// 监听网络状态变化
if ('connection' in navigator && 'addEventListener' in navigator.connection) {
    navigator.connection.addEventListener('change', () => {
        console.log('网络状态发生变化');
        console.log('effectiveType：', navigator.connection.effectiveType);
        console.log('rtt：', navigator.connection.rtt);
    });
}

这段代码首先检查 navigator 对象上是否存在 connection 属性，即是否支持 Network Information API。如果支持，它会打印出网络状态的基本信息，如下行宽带、effectiveType 和 rtt（round-trip time）。然后，它会监听网络状态的变化，并在变化时打印出新的 effectiveType 和 rtt。这样可以帮助开发者根据用户的网络状态来优化他们的应用程序，例如根据网络条件选择不同的资源加载方式或者延迟加载某些资源。