Noções básicas sobre o estado "Parado" do log de rede do Chrome

172

Eu tenho um seguinte log de rede no chrome:

log de rede

Não entendo nada disso: qual é a diferença entre barras cinza cheias e barras cinza transparentes.

google-chrome http httprequest google-chrome-devtools setec
fonte
2
Estou vendo muito isso nas últimas duas semanas. Tenho 125 itens carregando quando faço uma atualização de turno no chrome. De vez em quando, 3-4 desses arquivos ficam presos no estado "Parado". Todos os arquivos são arquivos .png. A única correção é fechar a guia, reabrir outra tabela e reabrir as ferramentas de desenvolvimento. Estou trabalhando nessa base de código há mais de um ano sem esse problema e não houve nenhuma alteração que eu acredite que possa causar esse comportamento nos arquivos png.
Greg Grater

Respostas:

202

O Google detalha esses campos na seção Avaliando o desempenho da rede da documentação do DevTools.

Trecho do tempo da rede de recursos :

Parado / Bloqueio

Tempo que a solicitação passou esperando antes de poder ser enviada. Esse tempo inclui todo o tempo gasto na negociação de proxy. Além disso, esse tempo incluirá quando o navegador estiver aguardando uma conexão já estabelecida se tornar disponível para reutilização, obedecendo ao máximo de seis conexões TCP do Chrome por regra de origem.

(Se você esquecer, o Chrome possui um link "Explicação" na dica de ferramenta instantânea e no painel "Tempo").

Basicamente, a principal razão pela qual você verá isso é porque o Chrome fará o download apenas de 6 arquivos por servidor por vez e outras solicitações ficarão paralisadas até que um slot de conexão esteja disponível.

Isso não é necessariamente algo que precisa ser corrigido, mas uma maneira de evitar o estado parado seria distribuir os arquivos por vários nomes de domínio e / ou servidores, mantendo o CORS em mente, se aplicável às suas necessidades, no entanto, o HTTP2 é provavelmente uma opção melhor daqui para frente. O pacote de recursos (como concatenação JS e CSS) também pode ajudar a reduzir a quantidade de conexões paralisadas.

Alexander O'Mara
fonte
1
O limite de 6 arquivos também está em vigor para arquivos locais? Eu encontro o estado estagnou de vez em quando ao carregar uma página defile:///C:/...
Ilya Kogan
@IlyaKogan Não parece haver um limite de 6 arquivos ao carregar do sistema de arquivos, mas parece haver uma fase "Parada". Meu palpite seria que isso representa o tempo que o Chrome leva para abrir o arquivo no sistema de arquivos e a fase "Download de conteúdo" representa o tempo que levou para carregar o conteúdo na memória.
Alexander O'Mara
4
FYI: no chrome 42, o tempo de espera na fila não é contado como seção Parada / Bloqueio conforme os documentos indicados, mas está incluído no total. Para obter tempo na fila, subtraia todas as seções do total. Espero que eles atualizem seus documentos (ou corrijam o bug).
Delrox 29/05
20
Mas qual é a diferença entre as barras branca e cinza?
22415 Kat
O compartilhamento de domínio para obter maior concorrência não é recomendado. Use HTTP2 em vez disso. Veja: youtube.com/watch?v=yURLTwZ3ehk
Homer6
13

DevTools: [rede] explica barras vazias antes da solicitação

Investigamos mais e identificamos que não há diferença significativa entre nossos intervalos de espera e de fila. Ambos são calculados a partir do delta de outros registros de data e hora, em vez de fornecidos pelo netstack ou renderizador.

Atualmente, se estamos aguardando a disponibilidade de um soquete:

  • vamos chamá-lo parado se alguma negociação de proxy aconteceu
  • chamaremos de enfileiramento se nenhum trabalho de proxy / ssl for necessário.
Naga Kiran
fonte
6

https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing

Isso vem do site oficial do Chome-devtools e ajuda. Aqui cito:

  • Filas Se uma solicitação estiver na fila, isso indica que:
    • A solicitação foi adiada pelo mecanismo de renderização porque é considerada uma prioridade mais baixa que os recursos críticos (como scripts / estilos). Isso geralmente acontece com imagens.
    • A solicitação foi colocada em espera para aguardar um soquete TCP indisponível que está prestes a ser liberado.
    • A solicitação foi colocada em espera porque o navegador permite apenas seis conexões TCP por origem no HTTP 1. Tempo gasto na criação de entradas de cache de disco (geralmente muito rápidas).
  • Tempo parado / bloqueado que a solicitação passou esperando antes de poder ser enviada. Pode estar aguardando qualquer um dos motivos descritos para o Enfileiramento. Além disso, esse tempo inclui todo o tempo gasto na negociação de proxy.
brevemente
fonte
1

Meu caso é que a página está enviando várias solicitações com parâmetros diferentes quando foi aberta. Então, a maioria está sendo "paralisada". As solicitações enviadas imediatamente são "paralisadas". Evitar solicitações desnecessárias seria melhor (ser preguiçoso ...).

Kevin .NET
fonte
1

Como muitas pessoas chegam aqui depurando seu site lento, gostaria de informá-lo sobre o meu caso, que nenhuma das explicações do Google ajudou a resolver. Meus enormes períodos de paralisação (às vezes 1 min) foram causados ​​pelo Apache em execução no Windows, com poucos segmentos de trabalho para lidar com as conexões, portanto estavam na fila.

Isso pode se aplicar a você se o log do apache tiver a seguinte observação:

Server ran out of threads to serve requests. Consider raising the ThreadsPerChild setting

Esse problema foi resolvido no Apache httpd.conf. Descomentar: Inclua conf / extra / httpd-mpm.conf

E edite o httpd-mpm.conf 

<IfModule mpm_winnt_module>
   ThreadLimit              2000
   ThreadsPerChild          2000
   MaxConnectionsPerChild   0
</IfModule>

Observe que você pode não precisar de 2000 threads ou pode precisar de mais. 2000 foi bom para o meu caso.

Renno K
fonte