使用JavaScript检测网络连接状态与性能指标

魔云连洲

于 2025-06-10 00:22:10 发布

阅读量680

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript 前端浏览器

本文链接：https://blog.csdn.net/m0_46335150/article/details/148545908

在现代Web开发中，了解用户的网络连接状态和性能指标对于提供良好的用户体验至关重要。本文将介绍如何使用JavaScript的Navigator API来检测网络连接状态、类型和下载速度。

网络连接状态检测基础

JavaScript提供了简单的方法来检测设备是否在线：

function isOnline() {
    if(navigator.onLine) {
        console.log("设备已连接网络");
    } else {
        console.log("设备处于离线状态");
    }
}

navigator.onLine属性返回一个布尔值，表示浏览器是否能够访问网络。我们可以监听online和offline事件来实时响应网络状态变化：

window.addEventListener('online', isOnline);
window.addEventListener('offline', isOnline);

获取网络连接详细信息

除了基本的在线/离线状态，我们还可以获取更详细的网络信息：

function updateConnectionInfo() {
    if(navigator.connection) {
        console.log("连接类型:", navigator.connection.effectiveType);
        console.log("下载速度:", navigator.connection.downlink, "Mbps");
    }
}

navigator.connection接口提供了以下有用的属性：

effectiveType: 表示连接的有效类型（如"4g"、“3g”、"2g"等）
downlink: 估计的下行链路速度（Mbps）
rtt: 估计的往返时间
saveData: 用户是否启用了节省数据模式

我们可以监听change事件来响应网络信息的变化：

navigator.connection.addEventListener('change', updateConnectionInfo);

实践应用示例

下面是一个完整的示例，展示了如何将这些API应用到实际项目中：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Document</title>
</head>

<body class="w-screen h-screen flex items-center">
    <div class="mx-auto w-100 h-50 flex flex-col justify-center items-center" id="networkDiv">
        <span></span><br/>
        <span></span><br/>
        <span></span>
    </div>

    <script>
        function isOnline(){
            const isonLineElement = document.querySelector('#networkDiv span')
            const container = document.querySelector('#networkDiv')
            if(navigator.onLine){
                isonLineElement.textContent = '连接状态：已连接'
                container.classList.remove('bg-red-100')
                container.classList.add('bg-blue-100')
                // 也可以用style切换颜色
                // container.style.backgroundColor = '#dbeafe'
            }else{
                isonLineElement.textContent = '连接状态：未连接'
                container.classList.remove('bg-blue-100')
                container.classList.add('bg-red-100')
                // 也可以用style切换颜色
                // container.style.backgroundColor = '#ffe2e2' 
            }
        }

        function updateConnectionInfo(){
            const connectTypeElement = document.querySelector('#networkDiv span:nth-of-type(2)')
            const speedElement = document.querySelector('#networkDiv span:nth-of-type(3)')
            const connectionType = '连接类型：' +  navigator.connection.effectiveType
            const speed = '下载速度：' + (navigator.connection.downlink / 8).toFixed(2) + ' MB/s'
            if(navigator.onLine) connectTypeElement.textContent = connectionType
            else connectTypeElement.textContent = '连接类型：离线状态'
            speedElement.textContent = speed
        }

        document.addEventListener('DOMContentLoaded', isOnline);
        document.addEventListener('DOMContentLoaded', updateConnectionInfo);
        window.addEventListener('online', isOnline)
        window.addEventListener('offline', isOnline)
        navigator.connection.addEventListener('change', updateConnectionInfo)  
    </script>
</body>

</html>