Cómo detectar la velocidad de conexión con JavaScript
La velocidad de conexión es la tasa de flujo de datos entre dos computadoras a través de una red, como Internet. La velocidad de conexión se mide en unidades de bits por segundo (bps), pero generalmente se indica en kilobits (1024 bits) por segundo (kbps, típico para conexiones de módem) o megabits (1024 kilobits) por segundo (Mbps, típico para conexiones de banda ancha) . La creación de una página web con JavaScript para medir y calcular la velocidad de la conexión es una herramienta de administración útil para el monitoreo de la red y la conexión a Internet que puede ejecutar directamente en su navegador web. También puede usarlo para detectar la conexión de los visitantes de su sitio web para decidir si enviar la versión de su contenido con uso intensivo de ancho de banda o ligera.
Paso 1
Abra su página web a la que desea agregar el JavaScript de detección de velocidad de conexión en su editor de texto.
Paso 2
Agregue etiquetas de secuencias de comandos iniciales y finales en el área de encabezado de la página web (después de las etiquetas iniciales y finales). etiqueta
pero antes del final etiqueta), por ejemplo:Paso 3
Agregue el siguiente código entre las etiquetas de secuencia de comandos inicial y final, reemplazando "myimage.jpg" con el nombre de archivo de la imagen que desea usar para la prueba de velocidad. La parte "?n=" + Math.random() de la dirección que se construye y asigna a imageAddr engaña al navegador web para que obtenga la imagen cada vez en lugar de usar una versión almacenada en caché local. Utilice una imagen con un tamaño de archivo de aproximadamente 200 kilobytes.
var imageAddr ="miimagen.jpg" + "?n=" + Math.random();
Paso 4
Agregue el siguiente código en la siguiente línea del script para crear las variables para almacenar la hora de inicio, la hora de finalización y el tamaño de la descarga de la prueba. Establezca "downloadSize" en el tamaño del archivo de imagen en bytes.
var startTime, endTime GO var downloadSize =200000;
Paso 5
Agregue el siguiente código para configurar la imagen que se descargará para la prueba. "descargar" se configura como un objeto de imagen. La acción para capturar el final de la descarga se asigna para activarse cuando se completa la descarga de la imagen.
var descargar =nueva imagen ();
descargar.onload =function() {
horafinal =(nueva Fecha()).obtenerHora();
mostrarResultados () IR }
Paso 6
Agregue el siguiente código que ejecuta la prueba de velocidad. La hora actual se captura en startTime. La dirección de la imagen que se asigna a download.src inicia la descarga de la imagen.
horaInicio =(nueva Fecha()).obtenerHora(); download.src =imageAddr;
Paso 7
Agregue la siguiente función al script que calcula muestra los resultados de la prueba de velocidad. Primero, calcula la duración, convirtiendo milisegundos a segundos. A continuación, convierte el tamaño de descarga en bits, calcula la velocidad de descarga y convierte la velocidad en kbps y Mbps. Finalmente, aparece un cuadro de mensaje con los resultados.
función mostrarResultados () { var duración =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) Alerta GO (" La velocidad de su conexión es:\n" + speedBps + " bps\n" + speedKbps + " kbps\n" + speedMbps + " Mbps\n") IR }
Paso 8
Abra la página en su navegador y pruébela para asegurarse de que el script funcione correctamente. El cuadro de mensaje puede tardar unos segundos en aparecer con los resultados de la prueba.
Consejo
El JavaScript mide la velocidad entre la computadora que ve la página web y el sitio que aloja la imagen utilizada para la prueba. Si está probando la conexión a su propio sitio web, aloje la imagen en su propio sitio web. Pruebe la velocidad de conexión general proporcionando la dirección a una imagen alojada en un sitio con mucho ancho de banda y velocidad, como Flickr o Amazon.