JS檢測網絡連接狀態和質量的核心方法包括：1.使用navigator.online判斷是否在線，但其準確性有限；2.通過請求小圖片或api接口判斷網絡是否連通；3.使用fetch api發起請求并判斷響應狀態；4.通過測量響應時間評估網絡質量。具體而言，navigator.online僅能作為輔助手段，實際更推薦通過image對象或fetch api發起網絡請求，若請求成功則說明網絡連通，否則可能斷開；同時，可記錄請求開始和結束時間計算響應時間，從而評估網絡質量，響應時間越短質量越高；此外，雖然瀏覽器提供了online和offline事件用于監聽網絡變化，但其依賴的navigator.online并不可靠，因此建議結合定期執行checknetworkstatus函數提高準確性；需要注意的是，這些方法均受服務器負載、dns解析等因素影響，建議多次測量取平均值以提升判斷可靠性。
JS檢測網絡連接狀態，簡單來說就是看看用戶是不是在線，以及網絡質量如何。但別指望它能像專業測速工具那樣精準，畢竟瀏覽器能提供的API有限。
直接上解決方案：
navigator.onLine 可以告訴你當前瀏覽器是否認為自己在線。但這玩意兒不太靠譜，有時候即使斷網了，它也可能返回true。所以，別太依賴它。
判斷網絡質量的4種檢測方法！
如何更可靠地檢測網絡狀態？
navigator.onLine 只能作為輔助判斷，更靠譜的方法是發起一個網絡請求，比如請求一個小的圖片或者API接口。如果請求成功，說明網絡是通的；如果請求失敗，那大概率就是斷網了。
function checkNetworkStatus() { return new Promise((resolve, reject) => { const img = new Image(); img.src = 'https://www.example.com/pixel.png?t=' + new Date().getTime(); // 添加時間戳防止緩存 img.onload = () => resolve(true); img.onerror = () => resolve(false); }); } checkNetworkStatus().then(isOnline => { if (isOnline) { console.log('網絡已連接'); } else { console.log('網絡已斷開'); } });
這種方法雖然比 navigator.onLine 靠譜，但也有局限性。比如，如果你的網站被防火墻屏蔽了，或者DNS解析有問題，這個方法也會認為網絡是斷開的。
除了圖片，還能用什么來檢測網絡？
除了圖片，還可以使用 fetch API 請求一個小的json文件。fetch API 提供了更豐富的配置選項，可以設置超時時間、請求頭等等。
function checkNetworkStatus() { return fetch('https://www.example.com/api/ping', { mode: 'no-cors', // 避免跨域問題 cache: 'no-cache' // 避免緩存 }) .then(response => response.ok) .catch(() => false); } checkNetworkStatus().then(isOnline => { if (isOnline) { console.log('網絡已連接'); } else { console.log('網絡已斷開'); } });
mode: ‘no-cors’ 可以避免跨域問題，cache: ‘no-cache’ 可以避免緩存。response.ok 可以判斷請求是否成功。
如何判斷網絡質量？
判斷網絡質量是個更復雜的問題。簡單來說，可以通過測量請求的響應時間來判斷。響應時間越短，網絡質量越好；響應時間越長，網絡質量越差。
function checkNetworkQuality() { const startTime = new Date().getTime(); return fetch('https://www.example.com/api/ping', { mode: 'no-cors', cache: 'no-cache' }) .then(response => { const endTime = new Date().getTime(); const responseTime = endTime - startTime; console.log('響應時間：', responseTime, 'ms'); return responseTime; }) .catch(() => { console.log('網絡請求失敗'); return Infinity; // 返回一個很大的值，表示網絡質量很差 }); } checkNetworkQuality().then(responseTime => { if (responseTime < 200) { console.log('網絡質量：非常好'); } else if (responseTime < 500) { console.log('網絡質量：良好'); } else if (responseTime < 1000) { console.log('網絡質量：一般'); } else { console.log('網絡質量：差'); } });
需要注意的是，響應時間受到很多因素的影響，比如服務器的負載、網絡的擁塞程度等等。所以，僅僅通過響應時間來判斷網絡質量是不夠準確的。可以多次測量響應時間，取平均值，這樣可以得到更可靠的結果。
如何監聽網絡狀態的變化？
瀏覽器提供了 online 和 offline 事件，可以監聽網絡狀態的變化。
window.addEventListener('online', () => { console.log('網絡已連接'); }); window.addEventListener('offline', () => { console.log('網絡已斷開'); });
但是，正如前面提到的，navigator.onLine 并不靠譜，所以 online 和 offline 事件也可能不準確。更可靠的方法是使用前面提到的 checkNetworkStatus 函數定期檢測網絡狀態。
總而言之，JS檢測網絡狀態和質量并沒有完美的解決方案。需要根據實際情況選擇合適的方法，并結合多種方法來提高準確性。
