Como detectar a velocidade da conexão com JavaScript

Escrito por deborah lee soltesz Google | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como detectar a velocidade da conexão com JavaScript
Aprenda a detectar a velocidade da conexão com JavaScript (computer image by fotografiche.eu from Fotolia.com)

A velocidade de conexão é a taxa na qual dois computadores transmitem dados pela rede, como a Internet. Essa velocidade é medida em unidades de bits por segundo (bps), mas normalmente é utilizada em kilobits (1024 bits) por segundo (kbps, típico de conexões de modem) ou megabits (1024 kilobits) por segundo (Mbps, típico de conexões de banda larga). A criação de uma página da web com JavaScript para medir e calcular a velocidade de conexão é uma ferramenta útil de administração para o monitoramento da conexão de rede e Internet que você utiliza no seu navegador. Você pode utilizá-la para detectar a conexão dos visitantes de seu site e decidir se vai encaminhá-los para a versão leve ou a versão com mais recursos do seu site.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto, como o Notepad++
  • Página na web
  • Navegador com JavaScript habilitado
  • Endereço de uma imagem na web para o teste

Lista completaMinimizar

Instruções

  1. 1

    Abra a página na qual você quer incluir o teste de velocidade no seu editor de textos.

  2. 2

    Adicione tags de script no início e fim na área de cabeçalho da página (depois da tag de início <HEAD> mas antes da tag de fim </HEAD>), por exemplo:

    <script type="text/javascript" language="Javascript"> </script>

  3. 3

    Adicione o código a seguir entre as tags de início e fim do script, substituindo "minhaimagem.jpg" com o nome da sua imagem para o teste. A parte do código "?n=" + Math.random() serve para que o navegador sempre tente buscar uma nova imagem, sem utilizar a imagem que está no cache. Utilize uma imagem com um tamanho de aproximadamente 200 kilobytes.

    var imageAddr = "minhaimagem.jpg" + "?n=" + Math.random();

  4. 4

    Inclua o código abaixo na próxima linha do script para criar as variáveis que armazenarão o tamanho do download, o tempo de início e término do teste. Configure "tamanhoDownload" com o tamanho da imagem em bytes.

    var tempoInicio, tempoTermino; var tamanhoDownload = 200000;

  5. 5

    Inclua o código a seguir para configurar a imagem que será baixada no teste. A variável "download" é configurada para ser um objeto do tipo Imagem. A ação para capturar o término do download é realizado quando o download da imagem é concluído.

    var download = new Image(); download.onload = function() { tempoTermino = (new Date()).getTime(); mostrarResultado(); }

  6. 6

    Inclua o próximo código que executa o teste de velocidade. O tempo atual é capturado na variável tempoInicio. O endereço da imagem configurado para download.src inicia o download da imagem.

    tempoInicio = (new Date()).getTime(); download.src = imageAddr;

  7. 7

    Adicione a função abaixo que calcula e exibe os resultados do teste na tela. Primeiramente, ela calcula a duração, convertendo milisegundos para segundos. Depois, ela converte o tamanho do download para bits, calcula a velocidade de download e então converte a velocidade para kbps e Mbps. Finalmente, ela exibe uma janela na tela com os resultados.

    function mostraResultados() { var duration = Math.round((tempoTermino - tempoInicio) / 1000); var bitsLoaded = downloadSize * 8; var speedBps = Math.round(bitsLoaded / duration); var speedKbps = (speedBps / 1024).toFixed(2); var speedMbps = (speedKbps / 1024).toFixed(2); alert ("Sua velocidade é de: \n" + speedBps + " bps\n" + speedKbps + " kbps\n" + speedMbps + " Mbps\n"); }

  8. 8

    Abra a página no seu navegador e teste para verificar se o script executa corretamente. Pode levar alguns segundos para que a mensagem seja exibida com os resultados.

Dicas & Advertências

  • O JavaScript mede a velocidade entre o computador visualizando a página e o site que hospeda a imagem para o teste. Se você está testando a conexão para o seu próprio site, hospede a imagem no seu site. Teste a velocidade de conexão inserindo o endereço para uma imagem hospedada em um site com muita largura de banda e velocidade, como o Flickr ou Amazon.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível