Este codelab mostra o processo de interpretação de todo o tráfego de rede de um aplicativo de exemplo um pouco complexo. Ao final do exercício, você terá as habilidades necessárias para descobrir o que seu próprio aplicativo da Web está carregando e quando ele está fazendo cada solicitação.
Acesse o painel Network
Acesse o painel Network para ver o tráfego de rede do aplicativo de demonstração.
- Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Atualize a página para ver o tráfego de rede.
O painel Network mostra todos os recursos carregados devido à navegação inicial:
Como interpretar as entradas
Cada linha de tráfego de rede gravado representa um único par de solicitação e resposta.
A primeira linha, com o tipo document, é a solicitação de navegação inicial para o
HTML do app da Web. Essa é a origem da hierarquia. Cada uma das solicitações subsequentes
de recursos adicionais (conhecidos como sub-recursos do documento principal) flui
dessa origem.
A segunda e a terceira linhas, que mostram um stylesheet de CSS e um sub-recurso script
sendo carregados, são solicitações dependentes iniciadas pelo documento principal.
Analisando quando essas solicitações são feitas, o diagrama em cascata mostra que elas só são iniciadas no final do processo de resposta à solicitação de navegação.
As solicitações do documento HTML, CSS e JavaScript são necessárias para exibir a página completa durante a navegação inicial.
Criar mais algumas solicitações de ambiente de execução
Com o painel Network ainda aberto e gravando, é hora de simular algo comum para muitos apps da Web: solicitações de API adicionais usadas para adicionar mais dados à página após a conclusão da navegação inicial.
Para acionar essas solicitações adicionais, clique em Find Me no app e em Allow no pop-up que aparece. Isso vai permitir que o site acesse sua localização atual:
Depois que o app da Web tiver um local para trabalhar, clicar em Find Nearby Wikipedia Entries vai resultar em várias outras solicitações de rede. Você vai encontrar algo como:
Interpretar as novas entradas
Como antes, cada linha de tráfego de rede registrado representa um único par de solicitação e resposta.
A primeira linha das novas entradas representa uma solicitação com um tipo de fetch,
que corresponde à
maneira como o app da Web solicita dados
da API Wikipedia.
As linhas a seguir são todas imagens (png ou jpeg) associadas às
entradas da Wikipédia. Embora seja um pouco difícil de ver na captura de tela, as
entradas na coluna "Waterfall" fluem diretamente da resposta da API.
Para todas essas solicitações adicionais, o momento vai variar de acordo com o tempo que a página ficou aberta antes de você clicar em Encontrar entradas da Wikipédia por perto. O mais importante aqui é que o momento é desconectado da solicitação de navegação inicial. Isso é indicado pela grande lacuna que existe na exibição em cascata, que representa um período que se passou entre o carregamento inicial e o momento em que a solicitação de API Wikipedia é feita.
As solicitações feitas após um intervalo de tempo após uma navegação se enquadram na categoria de "solicitações de ambiente de execução", em oposição ao conjunto inicial de solicitações usado para exibir a página quando você a acessou pela primeira vez.
Resumindo
Depois de seguir as etapas deste codelab, você já conhece as ferramentas que pode usar para analisar o que qualquer aplicativo da Web carrega.
O painel "Rede" ajuda a responder à pergunta sobre o que está sendo carregado, usando os URLs na coluna "Nome" e os dados na coluna "Tipo", além de quando está sendo carregado, usando a exibição em cascata.
Você também viu que as solicitações feitas por uma página da Web podem (geralmente) ser agrupadas em uma de duas categorias:
- Solicitações iniciais, feitas logo após navegar para uma nova página, para o HTML, JavaScript, CSS (e possivelmente outros recursos).
- Solicitações de ambiente de execução feitas como resultado da interação do usuário com a página. Isso geralmente começa com uma solicitação para uma API e, em seguida, flui para várias solicitações de acompanhamento com base nos dados da API recuperados.