Évaluer la vitesse de connexion en javascript
ybouane Évaluer la vitesse de connexion en javascript Note : 4/5 (0 vote) Derniéres modifications : 11/07/2009 à 20:34:56 Mots-Clés : évaluer vitesse connexion javascirpt visiteur script js estimer temps de chargement connaitre vitesse de téléchargement utilisateur en javascript ko/s bps octets par seconde Bonjour, dans ce script, je vais vous montrer comment détecter ou plutôt tester la vitesse de connexion de l'utilisateur grâce au langage de programmation Javascript. Pour cela, nous allons évaluer le temps que vas prendre le navigateur pour charger une image, nous allons par la suite simplement faire une division taille de l'image/temps de chargement nous obtiendrons donc la vitesse de connexion moyenne de l'utilisateur. Voici l'image que nous allons utiliser pour ce script, elle aura le nom de image.png: Elle a une taille de 158 298 octets. Pour connaitre la taille d'une image, il suffit de faire un clic droit dessus et de cliquer sur Propriétés (dans Windows), la taille sera affichée parmi les informations de l'image. Voici le script permettant d'évaluer la vitesse de connexion: Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Detecter vitesse de connexion</title> <script type="text/javascript"> //<!-- var image = 'http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/vitesse_connexion/image.png'; var size = 158298; var time1 = 0; var time2 = 0; function start_test_vitesse() { time1 = new Date(); time1 = time1.getTime(); var img = new Image(); img.src = image+'?'+time1; img.onload=end_test_vitesse; } function end_test_vitesse() { var time2 = new Date(); time2 = time2.getTime(); var ms = time2-time1; var vitesse = Math.round(size/ms100)/100; document.getElementById('vitesse').value=vitesse+'ko/s'; } //--> </script> </head> <body> Vitesse de connexion: <input type="text" id="vitesse" size="27" /><input type="button" value="Tester" onclick="javascript:start_test_vitesse();" /> </body> </html> Essayer Plus la taille de l'image est grande plus la vitesse de connexion sera exacte. Mais plus la taille de l'image est grande, plus de temps sera mis pour détecter la vitesse de connexion. Le résultat de ce teste peut facilement être faussé si le serveur ou l'image est hébergée prend du temps à répondre. merci, j'espère que vous avez aimé ce script et qu'il vous sera utile. Scripts et tutoriaux similaires à celui ci: Afficher l'heure et la date en temps réel Se souvenir d'un visiteur Javascript - son nom et le nombre de visites script cookies Système d'onglets en Javascript, (X)html et CSS dans la même page Précharger des images en javascript et detecter la fin du prechargement Compression Gzip en php - accélérer le téléchargement réduire taille pages Recharger/Actualiser une page en javascript Redirection avec temps à rebours Faire un calendrier en javascript avec un effet de transparence Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par walter le 11/07/2009 à 13:31:35 9ko c'est clairement insuffisant pour évaluer une connexion ADSL correctement. Il faudrait au minimum 1Mo et encore, entre le temps que met le serveur à répondre et les connexion supérieures à 8Mbps... Ton calcul sera vite bridé et très imprécis. À la limite, il faudrait détecter la vitesse grossièrement avec une petite image (plus de 10ko...) et ensuite faire un test plus adapté avec une image plus grande. Tu devrais mettre en garde les utilisateurs que le débit trouvé ici dépend pour beaucoup de l'état de la BP du serveur (saturée ou prête à accueillir du monde...) ! À revoir donc... même si l'idée de base est bonne (Tu pourrais éviter aux membres de lire les captcha, la vérification se fait qu'à l'inscription) Envoyé par ybouane le 11/07/2009 à 20:46:27 Salut, J'ai mis une image plus grande, 150 ko et j'ai mis une notice à la fin pour indiquer que le si le serveur ne répond pas assez vite, le résultat sera faussé. PS: j'ai fait une modification pour ne faire de vérification anti-bot pour les membres inscrits. Merci :) Envoyé par walter le 19/07/2009 à 13:13:06 D'après ce test, ma connexion ne dépasse pas les 200ko/s... Tu devrais voir pour éviter la mise en cache de l'image aussi. Parler des ko/s et des kb/s (FAI / réalité). Et pis pour l'image, je ne sais pas si tu as des quotas de BP avec ton hébergeur, mais là c'est toujours trop petite ^^ L'idéale serait de le faire en deux passes, une première phase ou tu essayes de voir comment réagis à la connexion, et ensuite tu mets une image plus grande si ton test arrive à un certains seuil (ici 150ko/s comme ton image, 1 seconde c'est clairement insuffisant pour évaluer correctement la connexion) Petite amélioration sympathique aussi, la possibilité de voir l'image se charger en même temps. Envoyé par ybouane le 24/07/2009 à 23:52:35 salut walter, pour la mise en cache, c'est déjà fait (le << +'?'+time1 >> dans l'adresse de l'image). Mais si quelqu'un veut des résultats plus précis, il lui suffit d'utiliser une image plus grande, mais il devra l'héberger lui même. merci :) Envoyé par Ronan le 19/05/2011 à 21:27:49 Bonjour, Concernant le calcul, ne serait-il pas plus judicieux de faire de cette manière : var vitesse = Math.round(((size/1024)/(ms/1000))100)/100; Etant donné que le résultat final est donné en Ko/s alors que la taille de l'image est indiquée en octets et que la durée est calculée en milli-seconde Ronan ronan@quennec.fr Envoyé par Ronan le 19/05/2011 à 21:47:40 Et pour avoir la vitesse en Kb/s, il suffit de multiplier le résulat de vitesse * 8 puisqu'un octet = 8 bits Envoyé par qnldhckr le 24/01/2012 à 12:30:02 20

Évaluer la vitesse de connexion en javascript

ybouane

Évaluer la vitesse de connexion en javascript
Note : 4/5 (0 vote)
Derniéres modifications : 11/07/2009 à 20:34:56
Mots-Clés : évaluer vitesse connexion javascirpt visiteur script js estimer temps de chargement connaitre vitesse de téléchargement utilisateur en javascript ko/s bps octets par seconde

Bonjour,
dans ce script, je vais vous montrer comment détecter ou plutôt tester la vitesse de connexion de l'utilisateur grâce au langage de programmation Javascript.

Pour cela, nous allons évaluer le temps que vas prendre le navigateur pour charger une image, nous allons par la suite simplement faire une division taille de l'image/temps de chargement
nous obtiendrons donc la vitesse de connexion moyenne de l'utilisateur.

Voici l'image que nous allons utiliser pour ce script, elle aura le nom de image.png:

Elle a une taille de 158 298 octets.
Pour connaitre la taille d'une image, il suffit de faire un clic droit dessus et de cliquer sur Propriétés (dans Windows), la taille sera affichée parmi les informations de l'image.

Voici le script permettant d'évaluer la vitesse de connexion:

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Detecter vitesse de connexion</title>

        <script type="text/javascript">

        //<!--

            var image = 'http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/vitesse_connexion/image.png';

            var size = 158298;

            var time1 = 0;

            var time2 = 0;

            function start_test_vitesse()

            {

                time1 = new Date();

                time1 = time1.getTime();

                var img = new Image();

                img.src = image+'?'+time1;

                img.onload=end_test_vitesse;

            }

            function end_test_vitesse()

            {

                var time2 = new Date();

                time2 = time2.getTime();

                var ms = time2-time1;

                var vitesse = Math.round(size/ms*100)/100;

                document.getElementById('vitesse').value=vitesse+'ko/s';

            }

        //-->

        </script>

    </head>

    <body>

        Vitesse de connexion: <input type="text" id="vitesse" size="27" /><input type="button" value="Tester" onclick="javascript:start_test_vitesse();" />

    </body>

</html>

Essayer

Plus la taille de l'image est grande plus la vitesse de connexion sera exacte. Mais plus la taille de l'image est grande, plus de temps sera mis pour détecter la vitesse de connexion.

Le résultat de ce teste peut facilement être faussé si le serveur ou l'image est hébergée prend du temps à répondre.

merci, j'espère que vous avez aimé ce script et qu'il vous sera utile.

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par walter le 11/07/2009 à 13:31:35

9ko c'est clairement insuffisant pour évaluer une connexion ADSL correctement.
Il faudrait au minimum 1Mo et encore, entre le temps que met le serveur à répondre et les connexion supérieures à 8Mbps... Ton calcul sera vite bridé et très imprécis.

À la limite, il faudrait détecter la vitesse grossièrement avec une petite image (plus de 10ko...) et ensuite faire un test plus adapté avec une image plus grande.

Tu devrais mettre en garde les utilisateurs que le débit trouvé ici dépend pour beaucoup de l'état de la BP du serveur (saturée ou prête à accueillir du monde...) !

À revoir donc... même si l'idée de base est bonne

(Tu pourrais éviter aux membres de lire les captcha, la vérification se fait qu'à l'inscription)

Envoyé par ybouane le 11/07/2009 à 20:46:27

Salut,
J'ai mis une image plus grande, 150 ko et j'ai mis une notice à la fin pour indiquer que le si le serveur ne répond pas assez vite, le résultat sera faussé.

PS: j'ai fait une modification pour ne faire de vérification anti-bot pour les membres inscrits.
Merci :)

Envoyé par walter le 19/07/2009 à 13:13:06

D'après ce test, ma connexion ne dépasse pas les 200ko/s...

Tu devrais voir pour éviter la mise en cache de l'image aussi.
Parler des ko/s et des kb/s (FAI / réalité).

Et pis pour l'image, je ne sais pas si tu as des quotas de BP avec ton hébergeur, mais là c'est toujours trop petite ^^
L'idéale serait de le faire en deux passes, une première phase ou tu essayes de voir comment réagis à la connexion, et ensuite tu mets une image plus grande si ton test arrive à un certains seuil (ici 150ko/s comme ton image, 1 seconde c'est clairement insuffisant pour évaluer correctement la connexion)

Petite amélioration sympathique aussi, la possibilité de voir l'image se charger en même temps.

Envoyé par ybouane le 24/07/2009 à 23:52:35

salut walter,
pour la mise en cache, c'est déjà fait (le << +'?'+time1 >> dans l'adresse de l'image).

Mais si quelqu'un veut des résultats plus précis, il lui suffit d'utiliser une image plus grande, mais il devra l'héberger lui même.

merci :)

Envoyé par Ronan le 19/05/2011 à 21:27:49

Bonjour,

Concernant le calcul, ne serait-il pas plus judicieux de faire de cette manière :

var vitesse = Math.round(((size/1024)/(ms/1000))*100)/100;

Etant donné que le résultat final est donné en Ko/s alors que la taille de l'image est indiquée en octets et que la durée est calculée en milli-seconde

Ronan

ronan@quennec.fr

Envoyé par Ronan le 19/05/2011 à 21:47:40

Et pour avoir la vitesse en Kb/s, il suffit de multiplier le résulat de vitesse * 8 puisqu'un octet = 8 bits

Envoyé par qnldhckr le 24/01/2012 à 12:30:02