如何使用 JavaScript 估算互联网速度？-js教程-PHP中文网

如何使用 JavaScript 估算互联网速度？

Barbara Streisand

发布： 2024-12-15 20:41:10

原创

196 人浏览过

How Can I Estimate Internet Speed Using JavaScript?

如何在 JavaScript 中估计互联网速度

问题：如何创建一个 JavaScript 页面来估计用户的互联网速度互联网速度并将其显示在页？

答案：

由于 Web 应用程序无法控制的因素，准确测量浏览器中的互联网速度非常困难。但是，可以通过以下方式获得近似估计：

加载已知大小的图像：加载已知文件大小较大的图像，例如几兆字节。
测量加载时间： 跟踪图像完成加载所需的时间（例如，使用onload 事件监听器）。
估计速度：通过将图像文件大小除以测量的加载时间来计算估计的互联网速度。

示例：

以下 JavaScript 代码演示了流程：

// 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"
    ]);
  }
}

登录后复制

注意：