256 votes

Comment détecter la vitesse d'Internet en JavaScript ?

Comment puis-je créer une page JavaScript qui détecte la vitesse d'Internet de l'utilisateur et l'affiche sur la page ? Quelque chose comme "Votre vitesse Internet est de ? ? / ?? Kb/s" .

1 votes

@Jakub, @Ankit : Les gens peuvent utiliser Flash pour ça, mais pas vous. besoin de à. Il n'y a aucune raison pour que vous ne puissiez pas le faire avec JavaScript.

0 votes

C'est ce dont vous avez besoin : speedof.me/api.html

331voto

Shadow Wizard Points 38568

C'est possible jusqu'à un certain point mais ce ne sera pas vraiment précis, l'idée est de charger une image avec une taille de fichier connue puis dans son onload mesure le temps qui s'est écoulé jusqu'au déclenchement de cet événement, et divise ce temps par la taille du fichier image.

Un exemple peut être trouvé ici : Calculer la vitesse en utilisant le javascript

Cas de test appliquant la correction suggérée ici :

//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg"; 
var downloadSize = 4995374; //bytes

function ShowProgressMessage(msg) {
    if (console) {
        if (typeof msg == "string") {
            console.log(msg);
        } else {
            for (var i = 0; i < msg.length; i++) {
                console.log(msg[i]);
            }
        }
    }

    var oProgress = document.getElementById("progress");
    if (oProgress) {
        var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
        oProgress.innerHTML = actualHTML;
    }
}

function InitiateSpeedDetection() {
    ShowProgressMessage("Loading the image, please wait...");
    window.setTimeout(MeasureConnectionSpeed, 1);
};    

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

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

<h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>

Comparaison rapide avec "Service de test de vitesse "réel a montré une petite différence de 0,12 Mbps en utilisant la grande image.

Pour garantir l'intégrité du test, vous pouvez exécuter le code avec la limitation de l'outil Chrome dev activée, puis voir si le résultat correspond à la limitation. _(le crédit va à utilisateur284130 :))_

Des éléments importants à garder à l'esprit :

  1. L'image utilisée doit être correctement optimisée et compressée. Si ce n'est pas le cas, la compression par défaut des connexions par le serveur web peut faire apparaître une vitesse plus grande qu'elle ne l'est en réalité. Une autre option consiste à utiliser un format de fichier non compressible, par exemple jpg. _(merci à Rauli Rajande pour <a href="https://stackoverflow.com/questions/5529718/how-to-detect-internet-speed-in-javascript/5529841?noredirect=1#comment40782354_5529841">en soulignant ce point </a>et Fluxine pour <a href="https://stackoverflow.com/questions/5529718/how-to-detect-internet-speed-in-javascript/5529841?noredirect=1#comment45076565_5529841">me rappelant </a> )_

  2. Le mécanisme de suppression du cache décrit ci-dessus peut ne pas fonctionner avec certains serveurs CDN, qui peuvent être configurés pour ignorer les paramètres des chaînes de requête, d'où l'intérêt de définir des en-têtes de contrôle du cache sur l'image elle-même. _(merci à orcaman pour <a href="https://stackoverflow.com/questions/5529718/how-to-detect-internet-speed-in-javascript/5529841?noredirect=1#comment45317811_5529841">en soulignant ceci </a>) )_

  3. Plus la taille de l'image est grande, mieux c'est. Une image plus grande rendra le test plus précis, 5 mb est correct, mais si vous pouvez utiliser une image encore plus grande, ce sera mieux.

0 votes

Le .12 mbps était le temps d'exécution du js, si vous exécutez une fonction de temps d'exécution et que vous le soustrayez de l'image globale... vous devriez obtenir une solution assez similaire.

9 votes

Veillez à ce que l'image de test soit correctement optimisée et compressée. Si ce n'est pas le cas, la compression par défaut des connexions par le serveur web pourrait montrer une vitesse plus grande qu'elle ne l'est réellement.

4 votes

J'ai trouvé une petite astuce pour m'assurer que votre image est adaptée au test : exécutez le code avec la limitation de l'outil de développement de Chrome activée, et voyez si le résultat correspond à la limitation. J'espère que cela pourra aider quelqu'un.

25voto

dmm79 Points 35

J'avais besoin d'un moyen rapide pour déterminer si la vitesse de connexion de l'utilisateur était assez rapide pour activer/désactiver certaines fonctionnalités dans un site sur lequel je travaille, j'ai fait ce petit script qui fait la moyenne du temps nécessaire pour télécharger une seule (petite) image un certain nombre de fois, il fonctionne assez précisément dans mes tests, étant capable de distinguer clairement entre 3G ou Wi-Fi par exemple, peut-être que quelqu'un peut faire une version plus élégante ou même un plugin jQuery.

var arrTimes = [];
var i = 0; // start
var timesToTest = 5;
var tThreshold = 150; //ms
var testImage = "http://www.google.com/images/phd/px.gif"; // small image in your server
var dummyImage = new Image();
var isConnectedFast = false;

testLatency(function(avg){
  isConnectedFast = (avg <= tThreshold);
  /** output */
  document.body.appendChild(
    document.createTextNode("Time: " + (avg.toFixed(2)) + "ms - isConnectedFast? " + isConnectedFast)
  );
});

/** test and average time took to download image from server, called recursively timesToTest times */
function testLatency(cb) {
  var tStart = new Date().getTime();
  if (i<timesToTest-1) {
    dummyImage.src = testImage + '?t=' + tStart;
    dummyImage.onload = function() {
      var tEnd = new Date().getTime();
      var tTimeTook = tEnd-tStart;
      arrTimes[i] = tTimeTook;
      testLatency(cb);
      i++;
    };
  } else {
    /** calculate average of array items then callback */
    var sum = arrTimes.reduce(function(a, b) { return a + b; });
    var avg = sum / arrTimes.length;
    cb(avg);
  }
}

1 votes

La réponse la plus fiable, dans mon cas.

1 votes

Qu'en est-il du test de téléchargement ?

23voto

T.J. Crowder Points 285826

Comme je le souligne dans cette autre réponse ici sur StackOverflow Pour ce faire, vous pouvez chronométrer le téléchargement de fichiers de différentes tailles (commencez petit, augmentez si la connexion semble le permettre), en vous assurant, grâce aux en-têtes de cache et autres, que le fichier est réellement lu depuis le serveur distant et non récupéré depuis le cache. Cela ne nécessite pas nécessairement que vous ayez votre propre serveur (les fichiers peuvent provenir de S3 ou similaire), mais vous aurez besoin d'un endroit où récupérer les fichiers afin de tester la vitesse de connexion.

Cela dit, les tests de bande passante ponctuels sont notoirement peu fiables, car ils sont influencés par d'autres éléments en cours de téléchargement dans d'autres fenêtres, la vitesse de votre serveur, les liens en cours de route, etc. Mais vous pouvez vous faire une idée approximative en utilisant ce genre de technique.

1 votes

@Jakub : Il faudrait avoir un endroit où télécharger, mais il n'y a pas de raison que vous ne puissiez pas utiliser la même technique pour cela. Vous pourriez utiliser des données que vous générez à la volée ou, bien sûr, vous pourriez réutiliser certaines des données que vous avez téléchargées pour le test de téléchargement.

0 votes

Alors comment savoir quand le téléchargement est terminé ?

2 votes

@Jakub : De plusieurs façons. Si vous soumettez un formulaire à un site caché iframe par exemple, vous interrogez le iframe ou un cookie pour l'achèvement. Si vous utilisez un XMLHttpRequest pour faire le post, il y a un callback pour l'achèvement.

3voto

Ashish Rana Points 41

Vous pouvez utiliser boomerang.js de yahoo. voici un lien vers les cas d'utilisation de ce produit

http://lognormal.github.io/boomerang/doc/use-cases.html

-1voto

mintedsky Points 23

Vous pouvez déterminer la latence. Essayez d'utiliser le script suivant pour mesurer le temps nécessaire au chargement complet d'une page :

<html>
<head>
<script type="text/javascript">

var start = new Date().getTime();
function onLoad() {
  var now = new Date().getTime();
  var latency = now - start;
  alert("page loading time: " + latency);
 }

</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>

Voir la page du 3WC sur le calendrier de navigation :
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X