O que está carregando um site?
Carregar uma página da web é mais ou menos como baixar um arquivo. O que você recebe pelo servidor é - na maioria dos casos - apenas um arquivo HTML transferido via HTTP. Primeiro, você faz uma solicitação HTTP para o URL do site, como GET http://superuser.com .
Como William Jackson disse, o HTTP usa o campo de cabeçalho Content-Length para mostrar o tamanho desse arquivo antecipadamente. Isso é algo que o navegador pode avaliar para adivinhar quanto progresso fez o download de todo o site.
No entanto, isso não cobre todos os recursos que um arquivo HTML pode carregar referenciando-os. Estes podem incluir:
- Imagens externas
- Folhas de estilo externas
- Scripts externos
- Quadros
- AJAX carrega
Como o navegador sabe quanto carregar?
Agora é a tarefa do navegador encontrar essas referências e solicitá-las também. Portanto, para cada referência externa, o navegador consultará seu cache ou enviará uma nova solicitação HTTP. Para o Superusuário, esses seriam os seguintes arquivos hospedados em redes de distribuição de conteúdo para um desempenho mais rápido:
-
GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js- o arquivo principal do jQuery -
GET http://cdn.sstatic.net/js/stub.js- algumas funções JS -
GET http://cdn.sstatic.net/superuser/all.css- a folha de estilo - ...
Você pode realmente ver isso usando o depurador do Firebug ou do Chrome, quando você ativa o rastreamento da linha do tempo. Esta é a linha do tempo do carregamento do Superusuário, filtrada para que apenas as solicitações sejam exibidas. Clique para ampliar:
Comopodemosver,ositeprincipaldeSuperusuáriolevarámaistempoparacarregar,masemcascataapartirdele,háoutrascargasdepágina(ouseja,solicitaçõesHTTPousolicitaçõesdecache)envolvidas.TodosessestambémexpõemseuContent-Length,portanto,onavegadorpodefazerumaboaestimativadequantotempolevaráparacarregartodosessesarquivos.
Ecomotudoissoestáacontecendodentrodeumperíododetempomuitocurto,vocênãonotaráaspequenasirregularidadesnabarradeprogresso.Àsvezes,vocêveráabarradeprogressotravaremdoisterços-issopodeserquandoonavegadornãoconseguecarregarumrecursoexternotãorápidoquantoosoutros.
Comoosnavegadoresimplementamisso?
GoogleChrome
EuexamineiasfontesdoGoogleChrome(tambémconhecidocomoChromium)edescobriqueessaclassesechamava ProgressTracker.cpp . Na verdade, é escrito pela Apple, então provavelmente vem do mecanismo de renderização WebKit . 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:
// For documents that use WebCore's layout system, treat first layout as the half-way point.
Portanto, se a primeira página for carregada (e seus recursos externos ainda precisarem ser carregados), o progresso será de 50%.
Firefox (complemento de fissão)
Agora, há também uma métrica ligeiramente mais fácil. Eu olhei para Fission , a extensão da barra de progresso para o Firefox. Se eu não estou lendo da maneira errada, é algo que alguém poderia pensar facilmente.
Todo site consiste em vários Elementos 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 exiba apenas uma barra de progresso de acordo com ele.