小而美企业网站建设,邢台建设网,wordpress 调用小工具,wordpress上篇下篇代码文章目录 前言一、网络状态二、网络速度 前言
本文主要记录如何监听网络状态和网络速度。 一、网络状态 获取当前网络状态: navigator.onLine // true:在线 false:离线监听事件#xff1a;online#xff08;联网#xff09; 和 offline#xff08;断网#xff09; windo… 文章目录 前言一、网络状态二、网络速度 前言
本文主要记录如何监听网络状态和网络速度。 一、网络状态 获取当前网络状态: navigator.onLine // true:在线 false:离线监听事件online联网 和 offline断网 window.addEventListener(online,function () {console.log(online)})window.addEventListener(offline,function () {console.log(offline)})二、网络速度 获取当前网络信息 navigator.connection // 返回 NetworkInformation 包含网络速度等信息downlink:0.35 当前网络连接估计下行速度effectiveType:“2g” 当前网络连接估计速度类型(slow-2g、2g、3g、4g)onchange:null 网络转换监听事件rtt:1900 网络连接往返时间saveData:false 是否处于数据节省模式 监听网络变化 navigator.connection.addEventListener(change,(){console.log(navigator.connection.effectiveType)if (navigator.connection.effectiveType 2g || navigator.connection.effectiveType slow-2g){alert(当前网络状态不佳)}})navigator.connection在不同浏览器的兼容是不一样的 Chrome从Chrome 61版本开始支持navigator.connection属性。Firefox从Firefox 59版本开始支持navigator.connection属性。Safari从Safari 12版本开始支持navigator.connection属性。Edge从Edge 79版本开始支持navigator.connection属性。Internet Explorer不支持navigator.connection属性。
需要注意的是即使浏览器支持navigator.connection属性也不能保证所有设备和操作系统都支持该属性。因此在使用navigator.connection属性之前最好先检查其是否存在以及是否为undefined。
