Comment puis-je mesurer la vitesse d'Internet à l'aide de JavaScript ?

Détecter la vitesse Internet avec JavaScript

De nombreuses applications nécessitent la possibilité de mesurer la vitesse Internet de l'utilisateur. Bien qu'elle ne soit pas toujours précise, elle peut fournir une indication utile sur la connectivité de l'utilisateur.

Approche

La solution consiste à charger une image avec une taille de fichier connue et à calculer la vitesse en fonction du temps nécessaire pour le charger. Cela se fait en :

1. Chargement de l'image et définition d'un gestionnaire de chargement.
2. Mesure de l'heure de début et de fin du chargement de l'image à l'aide de Date.getTime().
3. Calcul du temps nécessaire pour charger l'image en secondes.
4. Diviser la taille du fichier en bits par le temps pour obtenir la vitesse en bits par seconde (bps).
5. Conversion de la vitesse en kilobits par seconde (kbps) et mégabits par seconde (mbps) pour une meilleure lisibilité.

Exemple

Le code suivant fournit une implémentation de cette approche :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!