JavaScript实现获取设备网络连接信息
前言
作为前端开发,做好用户体验是很重要的,日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢,从而给影响用户体验。这里有一种优化思路,我们可以通过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获取网络信息的资料请关注脚本之家其它相关文章
最新评论