JavaScript实现获取设备网络连接信息
作者：JetTsang
作为前端开发，做好用户体验是很重要的，日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢，从而给影响用户体验，所以本文来和大家分享一个有趣的API，可以实现获取网络信息
前言
作为前端开发，做好用户体验是很重要的，日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢，从而给影响用户体验。这里有一种优化思路，我们可以通过JS来获取网络信息，比方说使用的是WI-FI还是蜂窝，下载速度大致是多少呀？来达到优化的目的，下面介绍这样一个API
介绍
Navigator.connection是一个只读的对象，它会提供一个一个 NetworkInformation 对象来获取设备的网络连接信息。例如用户设备的当前带宽或连接是否被计量，这可以用于基于用户的连接来选择高清晰度内容或低清晰度内容。
使用方法
const connectionInfo:NetworkInformation = navigator.connection
NetworkInformation定义
type NetworkInformation = {
readonly downlink:number // Mbps
readonly effectiveType: EffectiveConnectionType
onchange: EventHandler
readonly rtt:number // round trip time --> ms
}
// 每一个定义的枚举类型都有对应的参数范围的要求
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);这是一个实验性的API，它的适用范围：
在项目中使用
Vue
// 在组件挂载完毕
onMounted(() => {
const effectiveType = navigator.connection.effectiveType
switch (effectiveType) {
case '4g':
// 加载高质量资源
this.imgSrc = higherSrc
break;
case '3g':
// 加载稍低质量资源
this.imgSrc = lowerSrc
break;
case '2g':
// ...
break;
default:
//...
break;
}
})React
// 在组件挂载完毕后，只需执行一次
useEffect(()=>{
const effectiveType = navigator.connection.effectiveType
switch (effectiveType) {
case '4g':
// 加载高质量资源
setImgsrc(higherSrc)
break;
case '3g':
// 加载稍低质量资源
setImgsrc(lowerSrc)
break;
case '2g':
// ...
break;
default:
//...
break;
}
},[])总结
这个API可以根据用户的网速，来加载对应质量的资源，从而为用户带来更好的体验，需要注意的是，这是一个实验性质的API，支持的浏览器版本有限，使用的时候可以作为渐进增强来提高用户体验。
参考资料
以上就是JavaScript实现获取设备网络连接信息的详细内容，更多关于JavaScript获取网络信息的资料请关注脚本之家其它相关文章