Comment détecter la vitesse de connexion avec JavaScript
La vitesse de connexion est le débit des flux de données entre deux ordinateurs sur un réseau, tel qu'Internet. La vitesse de connexion est mesurée en unités de bits par seconde (bps), mais est généralement indiquée en kilobits (1024 bits) par seconde (kbps, typique pour les connexions par modem) ou en mégabits (1024 kilobits) par seconde (Mbps, typique pour les connexions à large bande) . La création d'une page Web avec JavaScript pour mesurer et calculer la vitesse de connexion est un outil d'administration utile pour la surveillance du réseau et de la connexion Internet que vous pouvez exécuter directement dans votre navigateur Web. Vous pouvez également l'utiliser pour détecter la connexion du visiteur de votre site Web afin de décider d'envoyer la version gourmande en bande passante ou allégée de votre contenu.
Étape 1
Ouvrez votre page Web à laquelle vous souhaitez ajouter le JavaScript de détection de vitesse de connexion dans votre éditeur de texte.
Étape 2
Ajoutez des balises de script de début et de fin dans la zone d'en-tête de la page Web (après le début Balise
mais avant la terminaison tag), par exemple :Étape 3
Ajoutez le code suivant entre les balises de script de début et de fin, en remplaçant "myimage.jpg" par le nom de fichier de l'image que vous souhaitez utiliser pour le test de vitesse. La partie "?n=" + Math.random() de l'adresse qui est construite et attribuée à imageAddr incite le navigateur Web à récupérer l'image à chaque fois au lieu d'utiliser une version mise en cache localement. Utilisez une image avec une taille de fichier d'environ 200 kilo-octets.
var imageAddr ="monimage.jpg" + "?n=" + Math.random();
Étape 4
Ajoutez le code suivant sur la ligne suivante du script pour créer les variables permettant de stocker l'heure de début, l'heure de fin et la taille de téléchargement du test. Définissez "downloadSize" sur la taille du fichier image en octets.
var startTime, endTime ALLER var downloadSize =200000;
Étape 5
Ajoutez le code suivant pour configurer l'image qui sera téléchargée pour le test. "download" est configuré en tant qu'objet Image. L'action pour capturer la fin du téléchargement est attribuée pour s'activer lorsque le téléchargement de l'image est terminé.
var download =nouvelle Image();
download.onload =fonction() {
endTime =(nouvelle Date()).getTime();
showResults () ALLER }
Étape 6
Ajoutez le code suivant qui exécute le test de vitesse. L'heure actuelle est capturée dans startTime. L'adresse de l'image attribuée à download.src démarre le téléchargement de l'image.
startTime =(nouvelle Date()).getTime(); download.src =imageAddr;
Étape 7
Ajoutez la fonction suivante au script qui calcule affiche les résultats du test de vitesse. Tout d'abord, il calcule la durée, en convertissant les millisecondes en secondes. Ensuite, il convertit la taille du téléchargement en bits, calcule la vitesse de téléchargement et convertit la vitesse en kbps et Mbps. Enfin, une boîte de message apparaît avec les résultats.
function showResults() { var duration =Math.round((endTime - startTime) / 1000); var bitsLoaded =downloadSize * 8 GO var speedBps =Math.round(bitsLoaded / duration) GO var speedKbps =(speedBps / 1024).toFixed(2) GO var speedMbps =(speedKbps / 1024).toFixed(2) GO alert (" Votre vitesse de connexion est :\n" + speedBps + " bps\n" + speedKbps + " kbps\n" + speedMbps + " Mbps\n") ALLER }
Étape 8
Ouvrez la page dans votre navigateur et testez-la pour vous assurer que le script fonctionne correctement. Cela peut prendre quelques secondes pour que la boîte de message s'affiche avec les résultats du test.
Astuce
Le JavaScript mesure la vitesse entre l'ordinateur visualisant la page web et le site hébergeant l'image utilisée pour le test. Si vous testez la connexion à votre propre site Web, hébergez l'image sur votre propre site Web. Testez la vitesse de connexion générale en fournissant l'adresse d'une image hébergée sur un site avec beaucoup de bande passante et de vitesse comme flickr ou Amazon.