Desenvolvimento Web: Anatomia de uma requisio HTTP

1 de 2

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

Voc acessou como Administrador Usurio (Sair)

Desenvolvimento WEB com HTML

Pgina inicial Cursos Perotto Desenvolvimento Web 17 fevereiro - 23 fevereiro Anatomia de uma requisio HTTP
Navegao

Anatomia de uma requisio HTTP

Pgina inicial
Minha pgina inicial
Pginas do site

Anatomia de uma requisio HTTP

Meu perfil
Curso atual
Desenvolvimento Web
Participantes
Relatrios
Geral
17 fevereiro - 23
fevereiro
Introduo
internet

Muitos fatores podem afetar a performance de uma pgina: largura de banda, distncia entre o cliente e o
servidor, tamanho e quantidade de elementos em uma pgina, como esses elementos so carregados e etc.
Precisamos conhecer exatamente como as coisas acontecem por debaixo dos panos, s assim conseguiremos
otimizar nossas pginas e deixar nossos usurios felizes.
Devemos comear 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 grfico em cascata
que mostra como os elementos da pgina esto sendo carregados.

Anatomia de
uma requisio
HTTP
Tendncias da
tecnologia web
jan/2014
24 fevereiro - 2
maro

Figura 1: Aba Net do FireBug

3 maro - 9 maro
10 maro - 16
maro
17 maro - 23
maro
24 maro - 30
maro
31 maro - 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 pgina inicial do site do Google. Cada linha da cascata
representa um componente de pgina sendo baixado para o browser do usurio. Perceba que primeiro o HTML
baixado e depois todos os componentes associados a ele (imagens, arquivos CSS, arquivos JS e etc).
No caso da visualizao do WebPageTest.org cada componente (linha) tem uma barra com pedaos coloridos
que representam diferentes atividades para aquela requisio HTTP, vejamos:

Configuraes
Figura 3: Requisio HTTP

Figura 4: Legenda

DNS Lookup
DNS (Domain Name System) Lookup o processo de resoluo de nome (de domnio) em IP, ou seja, achar
atravs de uma url, como http://www.google.com.br, o IP associado a mesma, que o que o browser precisa
para fazer a conexo com o servidor remoto.
Um ponto importantissmo que um DNS Lookup ir acontecer para cada domnio diferente que sua pgina
possa ter associado a ela, por exemplo: http://images.seusite.com.br ,http://static1.seusite.com.br. Cada um
desses subdomnios gerar um novo DNS Lookup j que diferentes subdomnios podem estar associados a
difentes IPs.

Initial Connection
Todos as requisies HTTP que um browser faz para o servidor so trafegadas atravs de conexes TCP
(Transmission Control Protocol), portanto toda requisio precisa de uma conexo TCP ativa para que se possa

17/2/2014 18:01

Desenvolvimento Web: Anatomia de uma requisio HTTP

2 de 2

Administrao da Pgina
Editar configuraes
Funes designadas
localmente
Permisses
Verificar permisses
Filtros
Logs
Backup
Restaurar

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

baixar os componentes da pgina.

Para se estabelecer uma conexo TCP um three-way handshake feito entre o cliente e o servidor atravs de
metadados enviados nos pacotes. Os pacotes do handshake so muito pequenos e depois de enviados e
reconhecidos pelas duas pontas a conexo estabelecida e a transferncia do arquivo pode ser iniciada.

Administrao do curso
Mudar papel para...
Minhas configuraes de
perfil
Administrao do site

Figura 5: Handshake
1.
2.
3.
4.

Browser envia um pacote com o metadado SYN (Sequence Number) para o servidor;
Servidor responde com ACK (Acknowledged) e um outro SYN;
Browser finaliza o cumprimente (handshake) com mais um ACK;
Conexo estabelecida.

Keep-Alive Header
Um novo header foi introduzido no HTTP 1.1 com o intuito de reaproveitar conexes TCP para difentes
requisies. Quando utilizamos o header Connection: keep-alive uma conexo TCP aberta e que nao tenha dado
timeout ainda ser reaproveitada para trafegar outras requisies HTTP, evitando assim o overhead de se
estabelecer conexes TCP (handshake).

Figura 6: Visualizao de conexes

Perceba que em uma mesma linha diferentes tipos de componentes so trafegados em momentos diferentes,
uma mesma conexo TCP reaproveitada.

Time to First Byte

O Time to First Byte, tambm conhecido como TTFB, o tempo que o browser espera para receber o primeiro
byte de informao da requisio, em pginas dinmicas podemos considerar esse tempo a demora do
processamento server side, por exemplo. Se o TTFB de uma request est muito alto, investigue, pois pode ser
um ponto importante para otimizaes (ndice de bancos de dados, melhorias de algoritmos na aplicao e etc).

Content Download
Depois de receber o primeiro byte, o resto em azul o tempo de download do componente. Perceba na figura
3 que s de bater o olho percebemos que mais da metade do tempo gasto nessa requisio foi com REDE!,
DNS Lookup, estabelecimento de conexo TCP e TTFB (resumidamente, consideramos esse tempo
simplesmente como LATNCIA).

Concluso
Digo novamente, ns desenvolvedores web precisamos conhecer muito tudo isso. Esse tipo de conhecimento
esta escondido e poucas pessoas tm, ou tentam aprender, mas com certeza saber isso faz de voc um melhor
desenvolvedor.

ltima atualizao: domingo, 16 fevereiro 2014, 16:44

Documentao de Moodle relativa a esta pgina

Voc acessou como Administrador Usurio (Sair)
Desenvolvimento Web
Excluir tudo que estiver em caches

17/2/2014 18:01