css - solo - prefix free falcon master

¿Cómo leen e interpretan los navegadores CSS? (7)

Pregunta de dos partes:

¿Los navegadores tienen un intérprete de CSS incorporado como lo hacen para JavaScript?
¿Cuándo exactamente un navegador lee el CSS y cuándo aplica el CSS?

Específicamente, me gustaría una aclaración sobre cómo o por qué JavaScript y CSS son diferentes en cuanto a que con JavaScript debe esperar específicamente hasta que aparezca window.onload para que el intérprete pueda obtener el elemento correctamente. Sin embargo, en CSS puede seleccionar y aplicar estilos a las clases e identificaciones, todo de manera ingeniosa.

(Si es importante, suponga que me estoy refiriendo a una página HTML básica con una hoja de estilo externa en la cabecera)

Creo que el navegador interpreta CSS a medida que lo encuentra, con el efecto de que CSS en el cuerpo (en línea) tiene prioridad sobre CSS (externo también) en la cabeza

Esta es la mejor descripción que encontré sobre cómo el navegador trata con HTML y CSS:

El motor de procesamiento comenzará a analizar el documento HTML y cambiará las etiquetas a los nodos DOM en un árbol llamado "árbol de contenido". Analizará los datos de estilo, tanto en archivos CSS externos como en elementos de estilo. La información de estilo junto con las instrucciones visuales en el HTML se utilizará para crear otro árbol: el árbol de renderizado.

En general los trabajos del motor de renderizado son:

Tokenize las reglas (dividiendo la entrada en tokens AKA Lexer)
Construyendo el árbol de análisis analizando la estructura del documento de acuerdo con las reglas de sintaxis del lenguaje

CSS analizador

A diferencia de HTML, CSS es una gramática libre de contexto (con una gramática determinística).
Así que tendremos una especificación de CSS que define la gramática léxica y de sintaxis de CSS, que el analizador aplica a través de la hoja de estilo.

La gramática léxica (vocabulario) se define mediante expresiones regulares para cada token:

comment ///*[^*]*/*+([^/*][^*]*/*+)*// num [0-9]+|[0-9]*"."[0-9]+ nonascii [/200-/377] nmstart [_a-z]|{nonascii}|{escape} nmchar [_a-z0-9-]|{nonascii}|{escape} name {nmchar}+ ident {nmstart}{nmchar}*

"ident" es la abreviatura de identificador, como un nombre de clase. "nombre" es un ID de elemento (al que hace referencia "#")

La gramática de la sintaxis se describe en BNF .

ruleset : selector [ '','' S* selector ]* ''{'' S* declaration [ '';'' S* declaration ]* ''}'' S* ; selector : simple_selector [ combinator selector | S+ [ combinator selector ] ] ; simple_selector : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; class : ''.'' IDENT ; element_name : IDENT | ''*'' ; attrib : ''['' S* IDENT S* [ [ ''='' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ] '']'' ; pseudo : '':'' [ IDENT | FUNCTION S* [IDENT S*] '')'' ] ;

Para obtener una descripción detallada del flujo de trabajo del navegador, consulte este article .

La representación de CSS es un tema interesante y todos los competidores están prosperando para acelerar la visualización de la capa de visualización (HTML y CSS) para ofrecer los mejores resultados a los usuarios finales en un abrir y cerrar de ojos.

En primer lugar, sí, los diferentes navegadores tienen su propio analizador de CSS / motores de procesamiento.

Chrome, Opera (desde la versión 15) - Utiliza el tenedor de Webkit llamado Blink Rendering engine
Safari: utiliza Webkit (ahora se mueve a Webkit2)
Internet Explorer - utiliza el motor de renderizado Trident
Mozilla Firefox - Usa Gecko

Todos estos motores de representación contienen tanto el intérprete de CSS como el analizador de DOM de HTML .

Todos estos motores siguen los modelos enumerados a continuación, estos son el conjunto del estándar W3C.

Nota: Todos estos modelos están interconectados y son interdependientes. No son modelos separados que definan estándares para representar el CSS. Estos modelos arrojan luz sobre cómo se procesa el CSS en función de la precedencia, como el estilo en línea, la especificidad, etc.

Explicación:

Nivel 1:

Todos los navegadores descargan el script HTML y CSS del servidor y comienzan a analizar las etiquetas HTML a los nodos DOM en un árbol llamado árbol de contenido .

Mientras el documento HTML que se está analizando, los motores de representación construyen otro árbol llamado el árbol de procesamiento . Este árbol es de elementos visuales en el orden en que se mostrarán.

Firefox lo llama como marcos donde los chicos de Webkit los llaman Renderer o Renderer object.

Vea la siguiente imagen: (Fuente: HTML5 Rocks )

Etapa 2:

Después del proceso anterior, estos dos árboles pasan por el proceso de diseño, lo que significa que el navegador le dice a la ventana gráfica dónde debe colocarse cada nodo en la pantalla.

Esto se define como un esquema de posicionamiento por W3C (Siga este enlace para obtener información detallada) que le indica al navegador cómo y dónde deben colocarse los elementos. A continuación se presentan los 3 tipos.

Flujo normal
Flotadores
Posición absoluta

Etapa 3:

Ahora la etapa final se llama pintura . Este es un proceso gradual en el que el motor de renderización atraviesa cada uno de los nodos del árbol de renderizado y los pinta visualmente utilizando la capa de backend de la interfaz de usuario. En este punto, todos los efectos visuales se aplican como tamaño de fuente, color de fondo, pintura de tablas, etc.

Nota: esta etapa se puede observar claramente si intenta abrir cualquier página web con una conexión lenta. La mayoría de los navegadores modernos para una mejor experiencia de usuario intentan mostrar los elementos lo antes posible. Esto le da al usuario la impresión de que la página se está cargando y hay que esperar para completarla.

Diagrama de bloques del flujo de trabajo para una mejor comprensión.

Fuente HTML5 Rocks

Webkit:

Gecko de Mozilla:

Referencias: (Lea los enlaces a continuación. Son los mejores recursos disponibles en la Web relacionados con este tema)

Los navegadores leen las líneas CSS de derecha a izquierda. Eso es lo que dicen tanto Google como Mozilla. Google dice "El motor evalúa cada regla de derecha a izquierda" en http://code.google.com/speed/page-speed/docs/rendering.html . Mozilla dice: ''El sistema de estilos coincide con las reglas comenzando con el selector de teclas, luego moviéndose hacia la izquierda'' en https://developer.mozilla.org/en/Writing_Efficient_CSS

Tomemos, por ejemplo, esta línea CSS: ''.item h4''. El navegador primero busca todas las etiquetas ''h4'' en la página y luego busca si la etiqueta h4 tiene un padre con el nombre de clase ''elemento''. Si encuentra uno, aplica la regla CSS.

Recientemente me topé con este artículo en la velocidad de la página de Google:

A medida que el navegador analiza HTML, construye un árbol de documentos interno que representa todos los elementos que se mostrarán. A continuación, hace coincidir los elementos con los estilos especificados en varias hojas de estilo, de acuerdo con las reglas estándar de CSS en cascada, herencia y orden. En la implementación de Mozilla (y probablemente también en otras), para cada elemento, el motor CSS busca reglas de estilo para encontrar una coincidencia. El motor evalúa cada regla de derecha a izquierda, comenzando desde el selector situado más a la derecha (llamada "clave") y moviéndose a través de cada selector hasta que encuentra una coincidencia o descarta la regla. (El "selector" es el elemento del documento al que debe aplicarse la regla.)

http://code.google.com/speed/page-speed/docs/rendering.html

Sí, los navegadores tienen un intérprete de CSS incorporado. La razón por la que no "esperas hasta que window.onload" se debe a que, si bien Javascript es un lenguaje de programación imperativo de Turing-complete, CSS es simplemente un conjunto de reglas de estilo que el navegador aplica para hacer coincidir Elementos que encuentra.

Si ha trabajado con una conexión lenta en algún momento recientemente, encontrará que CSS se aplicará a los elementos a medida que aparezcan (lentamente), lo que en realidad volverá a mostrar el contenido de la página a medida que se carga la estructura DOM. Dado que CSS no es un lenguaje de programación, no se basa en que los objetos estén disponibles en un momento dado para ser analizados correctamente (JavaScript), y el navegador puede simplemente reevaluar la estructura de la página a medida que recupera más HTML. Aplicando estilos a nuevos elementos.

Quizás es por eso que, incluso hoy, el cuello de botella de Mobile Safari no es la conexión 3G en todo momento, sino la representación de la página.