Como Javascript en bloques de representación HTML, no es así en el caso de CSS también?

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

  •  26-09-2019
  •  | 
  •  

Pregunta

Como JavaScript en bloques de representación HTML, y es una buena práctica para mantener JavaScript en la parte inferior, justo antes de cerrar la etiqueta del cuerpo, ¿no es el caso de CSS también?

Yo sé que no podemos mantener fuera CSS externo.

¿Fue útil?

Solución

CSS no bloquea de la misma manera lo hace JavaScript

Para citar Developer Network Blog de Yahoo

  

Con hojas de estilo, el procesamiento progresivo se bloquea hasta que todas las hojas de estilo se han descargado. Es por eso que es mejor para mover las hojas de estilo en el encabezado del documento, por lo que se descargan primera y la representación no está bloqueado. Con guiones, el procesamiento progresivo está bloqueado para todos los contenidos a continuación el guión. Mover guiones como la baja en la página como sea posible significa que hay más contenido por encima de la secuencia de comandos que se procesa antes.

Además, cuando se añade CSS a la cabeza, se analiza en primer lugar, y los resultados en el código HTML que se labró incluso mientras se descarga. Esto evita el destello de contenido sin estilo que sucede si se coloca etiquetas de estilo en la parte inferior de un gran página de HTML.

Otros consejos

No sólo CSS no bloquea el camino Javascript hace, pero también algunos navegadores hará cosas extrañas si se pone en cualquier lugar, pero el CSS <head>, al igual que lo ignoran, o aplicarlas de forma incompleta. HTML5 realidad prohíbe <style> aparezcan <head> exterior (excepto con la función "con ámbito", que yo sepa nadie implementos aún).

hojas de estilo CSS se cargan mediante el elemento <link>, este elemento sólo es válido cuando se encuentra en la cabecera del documento. En cuanto a CSS bloqueo de representación HTML, este no es el caso porque se aplica la CSS vez que el navegador se carga al igual que los otros elementos <link>. JS bloques de HTML ya que el navegador asume la JS quiere tomar el control y en realidad hacer algo antes de cargar el DOM totalmente, básicamente JS se ejecuta y luego dejado solo.

Piense en ello, si CSS se cargó el mismo que JS, ningún elemento podría ser de estilo, ya que se estaría refiriendo a elementos aún no cargados, por lo tanto, se aplica después y no bloquea la carga.

No, css se aplica a DOM elemento justo después de que el navegador lee el css.

En caso de javascript se puede mantener en el guión de lectura, ya que hacer que se ejecute después de todas las cargas del HTML, como: 

window.onload = function (){

//here we start
}

JS

Desde JS puede cambiar su página web (modificar el DOM) para todos los navegadores esperan JS externos para ser descargados (en paralelo), interpretadas y ejecutadas antes de continuar con el resto de los elementos HTML que se produce después de <script src="..." > Por lo tanto es una buena práctica para poner todos JS externos en la parte inferior de la <body>. De esta manera su HTML analizada y se rindió y el usuario tiene la sensación de que algo está pasando ...

CSS

CSS, por otro lado, no puede cambiar el DOM, no se puede realizar ningún cambio "pesados" en la página y es por eso que el navegador no bloquea la descarga, el análisis del resto del HTML, y el procesamiento progresivo como es el caso con la JS. Parece que bloquea la prestación, pero todavía es mejor ponerlo en la parte superior y evitar la larga FOUC . No bloquea descarga, aunque

Ahora, parece que con el aumento de los dispositivos móviles que ponen su CSS a la HEAD y JS en la parte inferior no es suficiente ... Usted tendrá que poner la ATF (por encima del pliegue) en línea CSS y el resto de su enorme CSS reducido al mínimo, junto con sus JS - en la parte inferior / defered y asíncrono

Tome un vistazo a esto: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

¿Por qué sería una buena práctica mantener Javascript en la parte inferior?

Yo diría que es la mejor práctica para poner CSS, así como Javascript en archivos separados y los incluye en su documento HTML usando la sección <head>.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top