Saltar al contenido

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

Rendering the Document Object Model

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

El modelo de objetos CSS toma el código CSS y procesa cada selector en una estructura de árbol para un análisis más fácil. Quizás no sea crucial que los desarrolladores comprendan completamente este concepto, pero es un tema valioso para estudiar si desea aprender más 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

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 … Lee mas

¿Qué es CSSOM?

El término modelo de objetos CSS describe un mapa de todos los selectores de 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 son las siglas de Document Object Model. Ambos forman parte del ruta de renderización crítica que es una serie de pasos que deben suceder para renderizar correctamente un sitio web. Todos estos procesos suceden automáticamente, detrás de escena.

Entonces, ¿por qué es importante CSSOM? Es el mapa que utiliza el navegador para renderizar 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 div .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 renderizar 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

Tanto el DOM como el CSSOM son utilizado ampliamente por todos los navegadores web interpretar y renderizar páginas web. El siguiente diagrama es de la guía de conceptos básicos de la Web para desarrolladores de Google y explica cómo DOM se representa en un navegador web.

Representación del modelo de objetos de documento

Tanto en DOM como en CSSOM, toda la información es convertido de bytes a mapas digitales que representan todos los elementos de un documento web. El proceso funciona de la siguiente manera:

  1. El navegador descarga el HTML para una página web.
  2. Mientras procesa el HTML, el analizador puede toparse con un elemento de enlace hacer referencia a una hoja de estilo externa.
  3. Esta hoja de estilo CSS es entonces analizado en un mapa utilizando las especificaciones del modelo de objetos CSS.
  4. El código resultante puede ser aplicado a elementos en el DOM.

Todo esto sucede muy rápido y ocurre con cada solicitud de página. Este otro diagrama a continuación muestra un ejemplo de estructura de árbol 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 son heredado de los padres. 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 HTML y CSS son convertido en tokens que luego puede ser entendido como nodos por el navegador. Estos nodos son como objetos dentro de la estructura del árbol que define cómo se debe construir la página completa.

CSSOM y DOM son completamente modelos de datos separados, por lo tanto son analizados por separado unos de otros. Pero ambos tienen estructuras arbóreas 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é deberían preocuparse los desarrolladores web

Dado que todo el renderizado sucede 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 después.

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 ser recreado en cada página.

Los archivos CSS reales se pueden almacenar en caché para cargar los activos más rápido pero representando 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 crear un cascada natural de recursos que se cargan en tándem.

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 se articula todo el asunto 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. Ahí 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: