Bagaimana Saya Boleh Mengukur Kelajuan Internet Menggunakan JavaScript?

Kesan Kelajuan Internet dengan JavaScript

Banyak aplikasi memerlukan keupayaan untuk mengukur kelajuan internet pengguna. Walaupun ia tidak selalu tepat, ia boleh memberikan petunjuk berguna tentang ketersambungan pengguna.

Pendekatan

Penyelesaian melibatkan memuatkan imej dengan saiz fail yang diketahui dan mengira kelajuan berdasarkan masa yang diambil untuk memuatkannya. Ini dilakukan dengan:

1. Memuatkan imej dan menetapkan pengendali onload.
2. Mengukur masa mula dan tamat pemuatan imej menggunakan Date.getTime().
3. Mengira masa yang diambil untuk memuatkan imej dalam beberapa saat.
4. Membahagikan saiz fail dalam bit dengan masa untuk mendapatkan kelajuan dalam bit sesaat (bps).
5. Menukar kelajuan kepada kilobit sesaat (kbps) dan megabit sesaat (mbps) untuk kebolehbacaan yang lebih baik.

Contoh

Kod berikut menyediakan pelaksanaan pendekatan ini:

var imageAddr = "https://example.com/image.png";
var downloadSize = 7300000; //bytes

function MeasureConnectionSpeed() {
  var startTime, endTime;
  var download = new Image();
  download.onload = function () {
    endTime = (new Date()).getTime();
    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 showResults() {
    var duration = (endTime - startTime) / 1000; //seconds
    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:");
    ShowProgressMessage(speedBps + " bps");
    ShowProgressMessage(speedKbps + " kbps");
    ShowProgressMessage(speedMbps + " mbps");
  }
}

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mengukur Kelajuan Internet Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!