You are on page 1of 2

Desenvolvimento Web: Anatomia de uma requisição HTTP

1 de 2

http://www.perotto.com.br/mod/page/view.php?id=412

Você acessou como Administrador Usuário (Sair)

Desenvolvimento WEB com HTML

Página inicial ► Cursos ► Perotto ► Desenvolvimento Web ► 17 fevereiro - 23 fevereiro ► Anatomia de uma requisição HTTP
Navegação

Anatomia de uma requisição HTTP

Página inicial
Minha página inicial
Páginas do site

Anatomia de uma requisição HTTP

Meu perfil
Curso atual
Desenvolvimento Web
Participantes
Relatórios
Geral
17 fevereiro - 23
fevereiro
Introdução à
internet

Muitos fatores podem afetar a performance de uma página: largura de banda, distância entre o cliente e o
servidor, tamanho e quantidade de elementos em uma página, como esses elementos são carregados e etc.
Precisamos conhecer exatamente como as coisas acontecem por debaixo dos panos, só assim conseguiremos
otimizar nossas páginas e deixar nossos usuários felizes.
Devemos começar por algum lugar a procura por gargalos. Existem muitas ferramentas que podem nos ajudar
com isso. O que todas elas possuem em comum é o que chamamos de Waterfall chart, um gráfico em cascata
que mostra como os elementos da página estão sendo carregados.

Anatomia de
uma requisição
HTTP
Tendências da
tecnologia web
jan/2014
24 fevereiro - 2
março

Figura 1: Aba Net do FireBug

3 março - 9 março
10 março - 16
março
17 março - 23
março
24 março - 30
março
31 março - 6 abril
7 abril - 13 abril
14 abril - 20 abril
21 abril - 27 abril
Cursos

Figura 2: Waterfall View da ferramenta WebPageTest.org
As duas figuras acima mostram o Waterfall view da página inicial do site do Google. Cada linha da cascata
representa um componente de página sendo baixado para o browser do usuário. Perceba que primeiro o HTML
é baixado e depois todos os componentes associados a ele (imagens, arquivos CSS, arquivos JS e etc).
No caso da visualização do WebPageTest.org cada componente (linha) tem uma barra com pedaços coloridos
que representam diferentes atividades para aquela requisição HTTP, vejamos:

Configurações
Figura 3: Requisição HTTP

Figura 4: Legenda

DNS Lookup
DNS (Domain Name System) Lookup é o processo de resolução de nome (de domínio) em IP, ou seja, é achar
através de uma url, como http://www.google.com.br, o IP associado a mesma, que é o que o browser precisa
para fazer a conexão com o servidor remoto.
Um ponto importantissímo é que um DNS Lookup irá acontecer para cada domínio diferente que sua página
possa ter associado a ela, por exemplo: http://images.seusite.com.br ,http://static1.seusite.com.br. Cada um
desses subdomínios gerará um novo DNS Lookup já que diferentes subdomínios podem estar associados a
difentes IP’s.

Initial Connection
Todos as requisições HTTP que um browser faz para o servidor são trafegadas através de conexões TCP
(Transmission Control Protocol), portanto toda requisição precisa de uma conexão TCP ativa para que se possa

17/2/2014 18:01

mas com certeza saber isso faz de você um melhor desenvolvedor. Os pacotes do handshake são muito pequenos e depois de enviados e reconhecidos pelas duas pontas a conexão é estabelecida e a transferência do arquivo pode ser iniciada. também conhecido como TTFB. Browser envia um pacote com o metadado SYN (Sequence Number) para o servidor.. Conexão estabelecida. o “resto” em azul é o tempo de download do componente. Content Download Depois de receber o primeiro byte. evitando assim o overhead de se estabelecer conexões TCP (handshake). Última atualização: domingo.perotto. Browser finaliza o cumprimente (handshake) com mais um ACK.Desenvolvimento Web: Anatomia de uma requisição HTTP 2 de 2 Administração da Página Editar configurações Funções designadas localmente Permissões Verificar permissões Filtros Logs Backup Restaurar http://www. Quando utilizamos o header Connection: keep-alive uma conexão TCP aberta e que nao tenha dado timeout ainda será reaproveitada para trafegar outras requisições HTTP. Time to First Byte O Time to First Byte. estabelecimento de conexão TCP e TTFB (resumidamente. ou tentam aprender. 4. Para se estabelecer uma conexão TCP um three-way handshake é feito entre o cliente e o servidor através de metadados enviados nos pacotes. Conclusão Digo novamente. melhorias de algoritmos na aplicação e etc).php?id=412 baixar os componentes da página. Perceba na figura 3 que só de bater o olho percebemos que mais da metade do tempo gasto nessa requisição foi com REDE!. pois pode ser um ponto importante para otimizações (índice de bancos de dados. Minhas configurações de perfil Administração do site Figura 5: Handshake 1. DNS Lookup. consideramos esse tempo simplesmente como LATÊNCIA). Figura 6: Visualização de conexões Perceba que em uma mesma linha diferentes tipos de componentes são trafegados em momentos diferentes. investigue.com. 2. Esse tipo de conhecimento esta escondido e poucas pessoas têm. é o tempo que o browser espera para receber o primeiro byte de informação da requisição.br/mod/page/view. Administração do curso Mudar papel para.1 com o intuito de reaproveitar conexões TCP para difentes requisições. em páginas dinâmicas podemos considerar esse tempo a demora do processamento server side. Se o TTFB de uma request está muito alto. Servidor responde com ACK (Acknowledged) e um outro SYN. por exemplo. Keep-Alive Header Um novo header foi introduzido no HTTP 1. uma mesma conexão TCP é reaproveitada. 16 fevereiro 2014. 16:44 Documentação de Moodle relativa a esta página Você acessou como Administrador Usuário (Sair) Desenvolvimento Web Excluir tudo que estiver em caches 17/2/2014 18:01 . 3.. nós desenvolvedores web precisamos conhecer muito tudo isso.