Guía para principiantes del modelo de objetos CSS (CSSOM)

Suceden muchas cosas entre la primera solicitud HTTP y la entrega final de una página web. La transmisión de datos y la canalización de procesamiento del navegador requieren muchas tecnologías diferentes, una de ellas es el modelo de objetos CSS o CSSOM .

El modelo de objetos CSS toma el código CSS y procesa cada selector en una estructura de árbol para facilitar el análisis. Quizás no sea crucial que los desarrolladores comprendan completamente este concepto, pero es un tema valioso para estudiar si desea obtener más información sobre cómo los navegadores convierten el código en un sitio web que funcione .

En esta publicación, cubriré los conceptos básicos del modelo de objetos CSS y le mostraré cómo funciona.

Revisión del nivel de prioridad del estilo CSS

La hoja de estilo en cascada (CSS) es, creo, el más simple de los lenguajes en comparación con otros lenguajes relacionados con la web, así que … Leer más

¿Qué es CSSOM?

El término modelo de objetos CSS describe un mapa de todos los selectores CSS y propiedades relevantes para cada selector . Estos estilos pueden ser elementos raíz o tener hijos anidados.

CSSOM es muy similar al DOM en HTML , que significa Document Object Model. Ambos son parte de la ruta de renderización crítica, que es una serie de pasos que deben suceder para renderizar correctamente un sitio web . Todos estos procesos ocurren automáticamente , detrás de escena.

Entonces, ¿por qué es importante CSSOM? Es el mapa que utiliza el navegador para representar correctamente los estilos CSS en una página web. No hay una manera fácil de decirle a una computadora que todos los párrafos en un .main-content deben tener una altura de línea adicional.

La solución es el modelo de objetos CSS que mapea todos los elementos y propiedades de su código CSS.

CSSOM hace que sea más fácil para el navegador representar estilos en la página . Todo es muy técnico, pero vale la pena comprender un poco el proceso, especialmente si crea sitios web.

Cómo funciona

Todos los navegadores web utilizan ampliamente DOM y CSSOM para interpretar y representar páginas web. El siguiente diagrama es de la guía de Fundamentos de la Web de Desarrolladores de Google y explica cómo se representa el DOM en un navegador web .

Representación del modelo de objetos de documento

Tanto en DOM como en CSSOM, toda la información se convierte de bytes en mapas digitales que representan cada elemento en un documento web. El proceso funciona de la siguiente manera:

  1. El navegador descarga el HTML de una página web.
  2. Mientras procesa el HTML, el analizador puede toparse con un elemento de enlace que hace referencia a una hoja de estilo externa .
  3. Luego, esta hoja de estilo CSS se analiza en un mapa utilizando las especificaciones del modelo de objetos CSS .
  4. El código resultante se puede aplicar a los elementos del DOM .

Todo esto sucede muy rápidamente y ocurre con cada solicitud de página . Este otro diagrama a continuación muestra una estructura de árbol de ejemplo del CSSOM .

Representación del modelo de objetos CSS

Observe cómo algunas propiedades en el diagrama tienen colores de fuente grises más claros. Estas propiedades se heredan del padre . Dado que el cuerpo tiene un tamaño de fuente específico, todos los elementos dentro del cuerpo también obtienen ese tamaño de fuente a menos que se anule.

Las cadenas de HTML y CSS se convierten en tokens que el navegador puede entender como nodos. Estos nodos son como objetos dentro de la estructura de árbol que define cómo se debe construir la página completa.

CSSOM y DOM son modelos de datos completamente separados, por lo tanto, se analizan por separado . Pero ambos tienen estructuras de árbol similares y ambos tienen el mismo propósito: darle al navegador una estructura para representar e identificar diferentes elementos en la página.

Por qué los desarrolladores web deberían preocuparse

Dado que todo el procesamiento ocurre en el backend , realmente no necesita preocuparse mucho por el árbol CSSOM. Pero puede resultar útil comprender cómo funciona.

Una cosa para recordar es que el CSSOM debe estar completamente cargado antes de que se muestre la página web, ya que definirá cómo deben verse todos los elementos de la página. Si la página se carga antes del CSSOM, primero aparecerá como HTML simple, seguido de los estilos unos segundos más tarde.

Los navegadores lo evitan específicamente porque sería confuso para los usuarios finales. Y vale la pena señalar que CSSOM no se puede almacenar en caché ; debe recrearse en cada página .

Los archivos CSS reales se pueden almacenar en caché para cargar los activos más rápido, pero la representación de una página en el navegador siempre requiere ejecutar el analizador CSSOM . Esto también significa que JavaScript puede tener un impacto negativo en la representación y el rendimiento.

Recomiendo encarecidamente leer este artículo para obtener más información sobre los recursos externos de CSS / JS y sus tiempos de carga.

La mejor manera de optimizar su sitio es creando una cascada natural de recursos que se cargan en conjunto .

Es posible manipular el CSSOM usando JavaScript porque técnicamente es una API JS . Pero no sirve para mucho en comparación con la manipulación DOM de JavaScript .

La razón más importante para aprender sobre CSSOM es informarse más sobre cómo funcionan realmente los sitios web.

Hay muchas cosas que damos por sentado que hacen que Internet funcione sin problemas. Cuando comprenda un poco más sobre todo el proceso, podrá visualizar cómo todo se integra y, con suerte, podrá apreciar la existencia de la World Wide Web.

Otras lecturas

Espero que esta introducción pueda darle una idea sólida de qué es el modelo de objetos CSS y cómo afecta a las páginas web. No hay mucho que manipular en CSSOM , por lo que difiere un poco del DOM.

Sin embargo, sigue siendo una tecnología crítica en el desarrollo web y debería aclarar los aspectos principales de la representación del navegador.

Hay muchos otros recursos que discuten el CSSOM y cómo funciona. Si está buscando obtener más información, aquí hay algunas publicaciones que recomiendo:

Deja un comentario