CursosEmpresasBlogLiveConfPrecios

Modelo de Objetos CSS: Interpretación y Generación de Árboles de Estilo

Clase 28 de 32 • Curso de Introducción a la Web: Historia y Funcionamiento de Internet

Contenido del curso

El lenguaje de la computadora

Historia de la Web

Tomar examen
Resumen

Cuando el navegador recibe tu página web, no basta con leer el HTML: también necesita interpretar los estilos CSS y organizarlos en una estructura que pueda utilizar. Este proceso genera lo que se conoce como CSSOM (CSS Object Model), un paso fundamental en el rendering de cualquier sitio web.

¿Qué es el CSSOM y por qué es importante?

El CSSOM es el modelo de objetos que el navegador construye a partir de tu archivo CSS [0:06]. Funciona de manera muy similar al DOM: así como el DOM organiza las etiquetas HTML en un árbol de nodos, el CSSOM organiza los estilos asociados a cada nodo en su propio árbol.

El navegador lee e interpreta cada regla de CSS y la vincula al nodo correspondiente del DOM. Si un nodo no tiene estilos asignados, simplemente no se genera un mapeo para él [0:39]. Pero cuando un nodo sí requiere CSS, se crea una rama del árbol con los estilos que le corresponden.

¿Cómo se construye el árbol del CSSOM paso a paso?

El proceso sigue un orden específico dentro del Critical Rendering Path:

  • El navegador lee el HTML y, al llegar a la etiqueta <head>, encuentra la referencia al archivo CSS [1:00].
  • Se realiza una petición para obtener el archivo CSS.
  • Para cuando el CSS llega, el DOM ya está prácticamente terminado [1:12].
  • El navegador comienza a interpretar el CSS y a ligarlo con los nodos existentes.

¿Cómo se vinculan los estilos con los nodos del DOM?

El navegador recorre cada selector de CSS y busca su equivalente en el DOM. Por ejemplo [1:18]:

  • Si encuentra una etiqueta <p> en el CSS, localiza la etiqueta <p> en el HTML y genera el árbol de estilos para ese nodo.
  • Lo mismo ocurre con una etiqueta <span>: se crea su rama correspondiente en el CSSOM.
  • Si hay una etiqueta <img>, también se mapean sus estilos.

Al finalizar, el resultado es un árbol completo de estilos donde cada rama está ligada al 100 % con un nodo del DOM [1:40].

¿El CSSOM y el DOM trabajan juntos o por separado?

En este punto del proceso, ambos árboles trabajan de forma independiente [1:52]. El DOM contiene la estructura de la información (las etiquetas en gris) y el CSSOM contiene los estilos (representados en negro en los diagramas). Todavía no se han fusionado.

La fusión de estos dos árboles ocurre en el siguiente paso del Critical Rendering Path, donde se combinan para crear lo que el navegador finalmente mostrará en pantalla.

¿Qué debes recordar sobre el proceso de construcción del CSSOM?

  • El CSSOM se genera después de que el DOM está casi listo.
  • Solo los nodos que tienen estilos asignados reciben un mapeo en el CSSOM.
  • Cada nodo del árbol CSS está directamente asociado a un nodo del DOM.
  • Ambos árboles son estructuras independientes hasta que se fusionan en el tercer paso del proceso de renderizado.

Entender cómo el navegador construye el CSSOM te permite tomar mejores decisiones al escribir CSS: un archivo de estilos más limpio y organizado se traduce en un árbol más eficiente y, por lo tanto, en una página que se renderiza más rápido. ¿Ya conocías este proceso? Comparte tu experiencia optimizando estilos en los comentarios.