html - para - etiquetas css

¿Cómo se aplica el CSS por el navegador y las modificaciones son afectadas por él? (3)

¿Cómo toma el navegador las reglas en esta hoja de estilo y la aplica al HTML?

Por lo general, esto se hace de forma continua. El navegador lee las etiquetas HTML como una secuencia, y aplica las reglas que puede a los elementos que ha visto hasta ahora. (Obviamente esto es una simplificación)

Unas preguntas y respuestas interesantes relacionadas: utilice selectores de CSS para recopilar elementos HTML de un analizador de transmisión (por ejemplo, transmisión SAX) ~~(una distracción mientras busco el artículo que tengo en mente).~~

Ah, aquí está: Por qué no tenemos un selector de padres .

A menudo pensamos en nuestras páginas como estos documentos completos y llenos de elementos y contenido. Sin embargo, los navegadores están diseñados para manejar documentos como una transmisión. Comienzan a recibir el documento del servidor y pueden procesar el documento antes de que se haya descargado por completo. Cada nodo se evalúa y se representa a la vista como se recibe.
Eche un vistazo al cuerpo de un documento de ejemplo:
<body> <div id="content"> <div class="module intro"> <p>Lorem Ipsum</p> </div> <div class="module"> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum <span>Test</span></p> </div> </div> </body>
El navegador comienza en la parte superior y ve un elemento del body . En este punto, cree que está vacío. No ha evaluado nada más. El navegador determinará cuáles son los estilos calculados y los aplicará al elemento. ¿Cuál es la fuente, el color, la altura de la línea? Después de que se da cuenta de esto, lo pinta en la pantalla.
Luego, ve un elemento div con una ID de content . Nuevamente, en este punto, cree que está vacío. No ha evaluado nada más. El navegador descubre los estilos y luego se pinta el div . El navegador determinará si necesita volver a pintar el cuerpo: ¿el elemento se hizo más ancho o más alto? (Sospecho que hay otras consideraciones, pero los cambios de ancho y alto son los efectos más comunes que los elementos secundarios tienen en sus padres).
Este proceso continúa hasta que llega al final del documento.

CSS se evalúa de derecha a izquierda.
Para determinar si una regla de CSS se aplica a un elemento en particular, comienza desde la derecha de la regla y funciona de la misma manera.
Si tiene una regla como body div#content p { color: #003366; } body div#content p { color: #003366; } luego, para cada elemento, tal como se procesa en la página, primero se preguntará si se trata de un elemento de párrafo. Si es así, se abrirá camino hasta el DOM y preguntará si se trata de un div con una ID de contenido. Si encuentra lo que está buscando, continuará su camino hasta el DOM hasta que llegue al body .
Al trabajar de derecha a izquierda, el navegador puede determinar si una regla se aplica a este elemento particular que está intentando pintar en la ventana gráfica mucho más rápido. Para determinar qué regla es más o menos eficiente, debe averiguar cuántos nodos deben evaluarse para determinar si un estilo se puede aplicar a un elemento.

Entonces, ¿por qué el contenido de la hoja de estilos no se aplicó progresivamente (primero el verde y luego el rojo)?

Creo que la respuesta es que las hojas de estilo externas se analizan a medida que se descargan, pero no se aplican hasta que se haya analizado toda la hoja de estilos. Seguramente, al analizar una hoja de estilo, el navegador optimiza las reglas CSS innecesarias y redundantes.

No tengo ninguna prueba para respaldar eso ahora, pero esa explicación me parece razonable y concuerda con lo que está viendo, tanto con los estilos externos como en línea.

Digamos que tenemos una página HTML con una única hoja de estilo <link> . ¿Cómo toma el navegador las reglas en esta hoja de estilo y la aplica al HTML? No estoy preguntando cómo hacerlo más rápido, quiero saber cómo se maneja la representación.

¿Aplica cada regla una por una a medida que analiza la hoja de estilos y presenta el resultado progresivamente? O bien, ¿el contenido del archivo CSS se descarga por completo, luego se evalúa por completo y luego se aplica al HTML de una sola vez? ¿O algo mas?

Pregunto esto después de publicar una respuesta anterior sobre una pregunta sobre el orden de las reglas CSS que afecta la velocidad de renderizado , suponiendo que los estilos se representaron cuando se cargó la hoja de estilo, por lo que las primeras se aplicaron antes que las anteriores y no todas a la vez. No estoy seguro de dónde recogí la idea, es solo algo que siempre pensé.

Probé una demostración en mi servidor que se veía así:

<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" href="test.css" /> </head> <body></body> </html>

contenidos de test.css :

html { background:green } /* thousands of lines of irrelevant CSS to make the download slow */ html { background:red }

Probando en Firefox 5, esperaba ver el verde al principio y luego el rojo. No sucedió Intenté con dos hojas de estilo separadas con reglas contradictorias y obtuve los mismos resultados. Después de muchas combinaciones, la única forma en que conseguí que funcionara era un bloque en línea <style> en <head> , con las reglas en conflicto provenientes de un <link> en el <body> (el cuerpo estaba completamente vacío excepto por el etiqueta de enlace). Incluso usar un atributo de style línea en la etiqueta <html> y luego cargar esta hoja de estilo no creó el parpadeo que esperaba.

¿El CSS afecta de alguna manera a las reparaciones o se aplica el resultado final de una sola vez después de que se haya descargado toda la hoja de estilo y se hayan calculado sus reglas con respecto a cuál debería ser el resultado final? ¿Los archivos CSS se descargan en paralelo con el HTML mismo o lo bloquean (como lo hacen las etiquetas de script)? ¿Cómo funciona esto realmente?

No estoy buscando consejos de optimización, estoy buscando referencias autorizadas sobre el tema, para poder citarlos en el futuro. Ha sido muy difícil buscar esta información sin generar toneladas de material no relacionado. Resumen:

¿Se descarga todo el contenido de CSS antes de aplicarlo? (referencia por favor)
¿Cómo se ve afectado por cosas como @import , múltiples <link> s, atributos de estilo en línea, <style> bloques en la cabeza y diferentes motores de renderizado?
¿La descarga de contenido CSS bloquea la descarga del documento HTML en sí?

Lo primero y más importante de entender es que los navegadores no pueden comenzar a pintar una página hasta que se haya descargado todo el CSS. (Tenga en cuenta que la especificación W3C dice que los enlaces CSS solo están permitidos en el encabezado, por lo que cuando inicie el enlace a hojas de estilo en la etiqueta body como lo hizo, diferentes navegadores manejarán esta situación de manera diferente).

Ahora, una página web se lee como una secuencia, y las reglas CSS se aplican a los elementos HTML a medida que se introducen en la página. Para citar el artículo de Google vinculado a continuación:

A medida que el navegador analiza HTML, construye un árbol de documento interno que representa todos los elementos que se mostrarán. A continuación, combina los elementos con los estilos especificados en varias hojas de estilo, de acuerdo con las reglas estándar de cascada, herencia y ordenamiento de CSS.

Así que ahora dirija sus preguntas:

¿Aplica cada regla una por una a medida que analiza la hoja de estilos y presenta el resultado progresivamente? O bien, ¿el contenido del archivo CSS se descarga por completo, luego se evalúa por completo y luego se aplica al HTML de una sola vez? ¿O algo mas?

Descarga todo el CSS, luego comienza a pintar el documento de arriba hacia abajo.

Probando en Firefox 5, esperaba ver el verde al principio y luego el rojo. No sucedió Intenté con dos hojas de estilo separadas con reglas contradictorias y obtuve los mismos resultados.

Esto se debe a que el CSS se descargó primero, luego, cuando se encontró con su elemento, solo aplicó el estilo rojo, debido a la forma en que funciona la cascada.

Después de muchas combinaciones, la única forma en que conseguí que funcionara era un bloque en línea <style> en <head> , con las reglas en conflicto provenientes de un <link> en el <body>

Aunque no puedo decir exactamente por qué sucedió esto, me imagino que el navegador no buscó CSS en la etiqueta corporal, comenzó a pintar, encontró el cuerpo CSS y luego repintó.

¿Las reparaciones se ven afectadas de alguna manera por el CSS?

Honestamente, estaría más preocupado por las reparaciones causadas por JS. Pero si tiene un DOM muy grande, tiene sentido estructurar su CSS de tal forma que no esté causando reflujos debido a un posicionamiento extraño. @Matt le dio algunos buenos enlaces sobre ese tema Algunos buenos recursos:

http://www.dayofjs.com/videos/22158462/web-browsers_alex-russel Alex Russell entra en gran detalle acerca de 36 minutos sobre cómo webkit analiza CSS, cómo funcionan los reflujos y las modificaciones, y qué los desencadena.

http://code.google.com/speed/page-speed/docs/rendering.html Este es un artículo básico sobre cómo optimizar la representación de CSS

No estoy seguro acerca de la respuesta marcada. Dudo que sea correcto. Según este enlace de Google Developers, el navegador descarga primero el archivo HTML y cuando ve un archivo CSS vinculado a un recurso externo, comienza a descargar el archivo CSS mientras crea simultáneamente la estructura DOM para el archivo HTML dado, ya que CSS no va a afectar el DOM. Tenga en cuenta que no aplica ningún estilo al documento cuando el navegador está descargando el archivo CSS.

Después de descargar el archivo CSS (suponiendo que no hay archivos de script) y si la construcción del DOM está completa, el navegador comienza a mapear las propiedades de CSS a esos nodos en el árbol DOM. Después de esto, crea otro árbol llamado Árbol de procesamiento que construye todos los objetos que se deben mostrar, como cuadros de rectángulo. Solo después de completar el árbol de renderizado comienza a pintar en la pantalla.

Para resumir:

El navegador descarga el archivo CSS por completo.
El navegador no aplica ningún estilo a la página cuando se está descargando. Solo después de completar la descarga, comienza a mapear las reglas.
Las reglas se aplican solo durante la etapa de construcción del árbol de renderizado.
La descarga del archivo CSS no bloquea la descarga HTML. Debe tener en cuenta que el navegador

Primero descarga todos los archivos html y luego se descargan los archivos de estilo y script.

Puede usar la consola del desarrollador de Chrome para verificar esto. Usa la pestaña de línea de tiempo para ver todo esto.

here muestra una muestra de la imagen de la línea de tiempo. El enlace que publiqué al comienzo de esta respuesta explica todo.