Como JavaScript em bloqueia a renderização HTML, não é o caso do CSS também?

StackOverflow https://stackoverflow.com/questions/4026183

  •  26-09-2019
  •  | 
  •  

Pergunta

Como JavaScript em blocos de renderização HTML, e é uma boa prática manter o JavaScript no fundo, pouco antes de fechar a etiqueta corporal, não é o caso do CSS também?

Eu sei que não podemos manter o CSS externo lá fora.

Foi útil?

Solução

CSS não bloqueia da mesma maneira que JavaScript faz

Citar Blog de rede de desenvolvedores do Yahoo

Com as folhas de estilo, a renderização progressiva é bloqueada até que todas as folhas de estilo sejam baixadas. É por isso que é melhor mover folhas de estilo para a cabeça do documento, para que elas sejam baixadas primeiro e a renderização não está bloqueada. Com os scripts, a renderização progressiva é bloqueada para todo o conteúdo abaixo de o script. Mover scripts o mais baixo na página possível significa que há mais conteúdo acima do script que é renderizado mais cedo.

Além disso, quando o CSS é adicionado à cabeça, ele é analisado primeiro e resulta no estilo HTML, mesmo quando é baixado. Isso evita o flash de conteúdo sem si que acontece se você colocar tags de estilo na parte inferior de uma grande página de HTML.

Outras dicas

Não apenas o CSS não bloqueia como o JavaScript, mas também alguns navegadores farão coisas estranhas se você colocar CSS em qualquer lugar, exceto o <head>, como ignorá -lo ou aplicá -lo incompletamente. HTML5 realmente proíbe <style> de aparecer lá fora <head> (Exceto com o recurso "escopo", que ainda não implementa).

As folhas de estilo CSS são carregadas usando o <link> Elemento, esse elemento é válido apenas quando está na cabeça do documento. Quanto à CSS bloqueando a renderização HTML, esse não é o caso porque o CSS é aplicado quando o navegador é carregado como o outro <link> elementos. O JS bloqueia o HTML porque o navegador assume que o JS quer assumir o controle e realmente fazer algo antes de carregar o DOM completamente, basicamente o JS é executado e depois deixado sozinho.

Pense nisso, se o CSS fosse carregado da mesma forma que o JS, nenhum elemento seria estilizado porque se referiria a elementos ainda não carregados; portanto, ele será aplicado posteriormente e não bloqueia o carregamento.

Não, o CSS é aplicado ao elemento DOM logo após o navegador ler o CSS.

No caso de JavaScript, você pode manter o script em Read, pois faz com que ele seja executado depois de todas as cargas HTML, como:

window.onload = function (){

//here we start
}

JS

Como o JS pode alterar sua página da web (modificar os navegadores DOM) aguarde que todos os JS externos sejam baixados (paralelos), interpretados e executados antes de continuar com o restante do HTML que vem depois <script src="..." >Portanto, é uma boa prática colocar todos os Js externos no fundo do <body>. Dessa forma, seu HTML é analisado e renderizado e seu usuário tem a sensação de que algo está acontecendo ...

CSS

O CSS, por outro lado, não pode alterar o DOM, não pode fazer alterações "pesadas" na página e é por isso que o navegador não bloqueia o download, a análise do restante do HTML e a renderização progressiva, como é o caso do JS. Parece que ele bloqueia a renderização, mas ainda é melhor colocá -lo no topo e evitar o longo Fouc . Não bloqueia o download, embora

Agora, parece que com a ascensão de dispositivos móveis colocando seu CSS em seu HEAD E JS na parte inferior não é suficiente ... você vai querer colocar o ATF (acima da dobra) CSS embutido e o restante de seu enorme CSS minimizado junto com seu JS - na parte inferior / adiado e async

Dê uma olhada neste: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

Por que seria uma boa prática manter o JavaScript na parte inferior?

Eu diria que é a melhor prática colocar CSS e JavaScript em arquivos separados e incluí -los no seu documento HTML usando o <head> seção.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top