O que acontece nos bastidores quando um navegador renderiza uma página sem formatação?

Question

Por exemplo, de vez em quando o Facebook quase não carrega nenhum gráfico e um monte de links azuis coloridos padrão no lado esquerdo da página.

Às vezes, parece que a conectividade com a Internet está com defeito e outras vezes, apenas aquele site está com problemas. Eu adoraria ouvir uma explicação detalhada sobre o problema.

Answer 1

Geralmente, isso significa que a página HTML principal contém um link para a folha de estilo CSS, que (por qualquer motivo) falhou ao carregar. Como a folha de estilo não está disponível, o navegador renderiza a página usando os estilos padrão (perdendo assim informações de posicionamento, gráficos de fundo, cores de link, etc. que o CSS especificou). Em particular, muitos sites modernos usam CSS para posicionar seus <div>arquivos na tela, portanto, sem o CSS, os links de navegação aparecem em sua posição padrão (alinhados à esquerda, percorrendo a página).

Causas Possíveis:

• Conexão de rede instável (por exemplo, o download de recursos expirou após o carregamento da página principal)
• Conexão perdida com a Internet, onde a página HTML principal permanece em cache
• Você cancelou o carregamento da página após o carregamento da página HTML, mas antes do carregamento dos recursos

• O servidor retornou uma resposta vazia (possivelmente devido a uma conexão de rede local incorreta, um proxy incorreto ou uma falha temporária no servidor).

  Um caso comum específico é que a página HTML esteja hospedada em um site ou domínio, e a maioria dos recursos vinculados esteja localizada em um domínio diferente. Por exemplo, Superusuário ( superuser.com) refere-se a folhas de estilo e imagens de UI (como as setas de votação) em cdn.sstatic.net, avatares de usuários em www.gravatar.come imagens de conteúdo em stack.imgur.com. Se sstatic.netcair temporariamente enquanto superuser.compermanece ativo, você obterá um efeito semelhante ao que descreveu.

Você mencionou que a página mostra "quase nenhum gráfico". É possível que o site especifique a maioria de seus gráficos como imagens de fundo usando CSS. O mais provável é que a maioria dos recursos vinculados à página (incluindo folhas de estilo e imagens) não esteja carregando. Isso resulta nos dois problemas que você descreve (formatação perdida e imagens perdidas).

As imagens carregadas não são afetadas pela falha do servidor ou do proxy (as imagens geralmente são hospedadas em servidores ou domínios diferentes da página principal) ou já estavam no cache do navegador (para que o navegador não tente buscá-las, evitando o erro).