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

Question

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

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

    

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) não foi carregada. 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 plano de fundo, cores de links, etc. especificados pelo CSS). Em particular, muitos sites modernos usam CSS para posicionar seus <div> s na tela, então 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 lenta (por exemplo, os recursos de download atingiram o tempo limite após a página principal ser carregada)
• Perdeu a conexão com a Internet, onde a página HTML principal permanece no cache
• Você cancelou o carregamento da página após a página HTML ser carregada, mas antes dos recursos carregados

• O servidor retornou uma resposta vazia (possivelmente de uma conexão de rede local incorreta, um proxy inválido ou uma falha temporária do servidor).

  Um caso comum em particular é que a página HTML está hospedada em um site ou domínio e a maioria dos recursos vinculados está localizada em um domínio diferente. Por exemplo, Super Usuá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.com e imagens de conteúdo em stack.imgur.com . Se sstatic.net cair temporariamente enquanto superuser.com permanecer ativo, você terá um efeito semelhante ao descrito.

Você menciona 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 o CSS. Mais provavelmente, a maioria dos recursos vinculados pela página (incluindo folhas de estilo e imagens) não está sendo carregada. Isso resulta em ambos os problemas que você descreve (perda de formatação e perda de imagens).

As imagens carregadas não são afetadas pelo servidor ou falha de proxy (as imagens são frequentemente hospedadas em diferentes servidores ou domínios da página principal da Web) ou já estavam no cache do navegador (portanto, o navegador não tenta buscá-los, evitando o erro).