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 :
-
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> )_
-
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>) )_
-
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.
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