☰

Como o navegador sabe quanta página foi carregada?

tag-icon • tag-icon firefox browser progress
Como o navegador sabe quanta página foi carregada?

Olhando para a barra de progresso do navegador, que às vezes fica lenta perto do final durante o carregamento de uma página da web, fiquei me perguntando se o navegador mostra o progresso com base notamanhode elementos presentes na página ou nonão.de elementos ou algo mais?

Talvez alguém que verificou a fonte do Firefox ou de algum outro navegador saiba disso com mais detalhes?

Responder1

O queécarregando um site?

Carregando uma página da webémais ou menos como baixar um arquivo. O que você obtém do servidor é – na maioria dos casos – apenas um arquivo HTML transferido por HTTP. Primeiro, você faz uma solicitação HTTP para a URL do site, como GET http://superuser.com.

Como disse William Jackson, HTTP usa oContent-Lengthcampo de cabeçalho para mostrar o tamanho desse arquivo antecipadamente. Isso é algo que o navegador pode avaliar para adivinhar quanto progresso fez no download de todo o site.

No entanto, isso não cobre todos os recursos que um arquivo HTML pode carregar referenciando-os. Isso pode incluir:

  • Imagens externas
  • Folhas de estilo externas
  • Scripts externos
  • Molduras
  • Cargas AJAX

Como o navegador sabe quanto carregar?

Agora cabe ao navegador encontrar essas referências e solicitá-las também. Assim, para cada referência externa, o navegador irá consultar seu cache ou enviar uma nova solicitação HTTP. Para superusuário, seriam os seguintes arquivos hospedados em redes de distribuição de conteúdo para desempenho mais rápido:

  • GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js– o arquivo jQuery principal
  • GET http://cdn.sstatic.net/js/stub.js– algumas funções JS
  • GET http://cdn.sstatic.net/superuser/all.css– a folha de estilo
  • ...

Na verdade, você pode ver isso usando o Firebug ou o depurador do Chrome, ao ativar o rastreamento da linha do tempo. Esta é a linha do tempo de carregamento do Superusuário, filtrada para que apenas as solicitações sejam mostradas. Clique para ampliar:

insira a descrição da imagem aqui

Como podemos ver, o site principal do superusuário levaria mais tempo para carregar, mas em cascata a partir dele, há outros carregamentos de página (ou seja, solicitações HTTP ou solicitações de cache) envolvidos. Todos eles também expõem seus arquivos Content-Length, portanto o navegador pode adivinhar quanto tempo levará para carregar todos esses arquivos.

E como tudo isso acontece em um espaço de tempo muito curto, você não notará as pequenas irregularidades na barra de progresso. Às vezes, você verá a barra de progresso travar em dois terços – isso pode ocorrer quando o navegador não consegue carregar um recurso externo tão rápido quanto os outros.

Como os navegadores implementam isso?

Google Chrome

Examinei as fontes do Google Chrome (também conhecido como Chromium) e encontrei esta classe chamadaProgressTracker.cpp. Na verdade, foi escrito pela Apple, então provavelmente decorre doKit Webmecanismo de renderização. Inclui os seguintes campos:

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

Assim, como eu disse, o número total de bytes de recursos será identificado e o progresso será alterado de acordo. Há um comentário interessante que mostra como a importância real da primeira página carregada é elevada:

// Para documentos que usam o sistema de layout do WebCore, trate o primeiro layout como o ponto intermediário.

Portanto, se a primeira página for carregada (e seus recursos externos ainda estiverem por carregar), o progresso será de 50%.

Firefox (complemento Fission)

Agora, há também uma métrica um pouco mais fácil. Eu olhei paraFissão, a extensão da barra de progresso do Firefox. Se não estou lendo da maneira errada, faz algo em que alguém poderia facilmente pensar.

Cada site consiste em uma série deElementos DOM. Ao analisar o primeiro site HTML, o número total de elementos DOM a serem carregados pode ser estimado.

Para cada elemento DOM carregado, aumente o contador e apenas exiba uma barra de progresso de acordo com ele.

Responder2

Quando um navegador solicita um arquivo de um servidor, o servidor tem a opção de informar antecipadamente ao navegador o tamanho do arquivo. O servidor faz isso enviando umCabeçalho de comprimento de conteúdo.

Existem algumas outras informações sobrecomo um navegador pode determinar o tamanho de um arquivo que está baixando.

informação relacionada