如何在JavaScript 中估計(jì)網(wǎng)際網(wǎng)路速度

問(wèn)題：如何建立一個(gè)JavaScript 頁(yè)面來(lái)估計(jì)使用者的網(wǎng)路速度互聯(lián)網(wǎng)速度並將其顯示在頁(yè)面上？

答案：

由於 Web 應(yīng)用程式無(wú)法控制的因素，準(zhǔn)確測(cè)量瀏覽器中的網(wǎng)路速度非常困難。但是，可以透過(guò)以下方式獲得近似估計(jì)：

1. 載入已知大小的圖像：載入已知檔案大小較大的圖像，例如幾兆位元組。
2. 測(cè)量載入時(shí)間： 追蹤圖片完成載入所需的時(shí)間（例如，使用onload 事件監(jiān)聽(tīng)器）。
3. 估計(jì)速度：透過(guò)將影像檔案大小除以測(cè)量的載入時(shí)間來(lái)計(jì)算估計(jì)的網(wǎng)路速度。

範(fàn)例：

以下 JavaScript程式碼示範(fàn)了流程：

// Image address and file size (in bytes)
var imageAddr = "https://large-image-url";
var downloadSize = 7300000;

// Function to show progress messages
function ShowProgressMessage(msg) {
  // Display messages in the console and a UI element
}

// Function to initiate speed detection
function InitiateSpeedDetection() {
  ShowProgressMessage("Loading image...");
  window.setTimeout(MeasureConnectionSpeed, 1);
}

if (window.addEventListener) {
  window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', InitiateSpeedDetection);
}

// Function to measure connection speed
function MeasureConnectionSpeed() {
  var startTime, endTime;
  var download = new Image();

  // Event listeners for load and error
  download.onload = showResults;
  download.onerror = function (err, msg) {
    ShowProgressMessage("Invalid image or error downloading");
  };

  startTime = (new Date()).getTime();
  var cacheBuster = "?nnn=" + startTime;
  download.src = imageAddr + cacheBuster;

  // Function to show speed results
  function showResults() {
    endTime = (new Date()).getTime();
    var duration = (endTime - startTime) / 1000;
    var bitsLoaded = downloadSize * 8;
    var speedBps = (bitsLoaded / duration).toFixed(2);
    var speedKbps = (speedBps / 1024).toFixed(2);
    var speedMbps = (speedKbps / 1024).toFixed(2);

    ShowProgressMessage([
      "Your connection speed is:",
      speedBps + " bps",
      speedKbps + " kbps",
      speedMbps + " Mbps"
    ]);
  }
}

注意：

• 由於瀏覽器快取等因素，預(yù)期速度可能低於您的實(shí)際速度。
• 此方法僅用於演示目的，不應(yīng)用於可靠的速度測(cè)量。

以上是如何使用 JavaScript 估算網(wǎng)路速度？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！