¿Qué es el CSS Object Model (CSSOM)?

¿Qué es el CSSOM?

El modelo de objetos CSS (CSSOM, de CSS Object Model) es la representación en memoria que hace el navegador de todo el CSS aplicado a una página, junto con APIs de JavaScript para leerlo y modificarlo. Es el equivalente de estilos del DOM: el DOM describe el contenido y el CSSOM describe cómo se estiliza. Consulta la referencia de MDN.

Cómo funciona

Mientras el navegador convierte el HTML en el DOM, también convierte cada hoja de estilos que encuentra en el CSSOM. Ambos se combinan en el árbol de renderizado, que solo contiene los nodos visibles con los estilos que se les aplican. Después el navegador calcula el diseño y pinta ese árbol. Esa secuencia es la ruta crítica de renderizado.

Hay una diferencia que importa para la velocidad: el DOM se construye de forma incremental, pero el CSSOM no se usa hasta que está completamente analizado, porque una regla posterior puede anular una anterior. Por eso el CSS bloquea el renderizado por defecto: el navegador no muestra contenido procesado hasta que el CSSOM está construido.

Ejemplo

Una página enlaza una hoja de estilos grande en el head. El HTML llega rápido, pero la hoja tarda bastante más y la pantalla queda en blanco hasta que termina. Si separas los estilos solo para impresión o pantallas grandes con un atributo media como media="print", dejan de bloquear el primer renderizado. El navegador los descarga igualmente, con menor prioridad.

Leer y cambiar estilos desde JavaScript

• document.styleSheets y CSSStyleSheet permiten inspeccionar y editar reglas.
• element.style establece estilos en línea.
• getComputedStyle() devuelve un objeto vivo y de solo lectura con los valores resueltos tras aplicar las hojas de estilos.

Errores habituales

• Una sola hoja de estilos enorme: todo lo que contiene bloquea el primer pintado. Mantén pequeño el CSS crítico y marca el resto como no bloqueante con media queries.
• Leer y escribir estilos en un bucle: leer un valor de diseño como offsetHeight justo después de cambiar un estilo obliga al navegador a calcular el diseño al instante. Repetido en un bucle se llama layout thrashing. Agrupa primero las lecturas y después las escrituras.
• Cambiar muchas propiedades una a una: cambia una clase una sola vez.
• CSS que carga tarde: los estilos que llegan después del contenido pueden desplazar el diseño y perjudican el Cumulative Layout Shift.

CSSOM y medición del rendimiento

Un CSSOM lento retrasa el primer pintado y, con él, métricas como el Largest Contentful Paint. Mira renderizado para el panorama completo. Para seguir estas cifras, la monitorización de velocidad de página registra puntuaciones de Lighthouse y Core Web Vitals de forma programada y puede avisarte si empeoran, y el verificador de Core Web Vitals da una lectura rápida puntual. Para seguir leyendo: cómo mejorar la velocidad de tu web y cómo monitorizar Core Web Vitals.

Preguntas frecuentes sobre el CSSOM

¿Cuál es la diferencia entre el DOM y el CSSOM?

El DOM es un árbol del contenido de la página (elementos y texto). El CSSOM contiene las reglas de estilo. El navegador combina ambos en el árbol de renderizado con el que calcula el diseño y pinta la página.

¿El CSS bloquea el renderizado?

Sí, por defecto. El navegador no muestra contenido procesado hasta que el CSSOM está construido. Las hojas de estilos con un tipo de medio o una media query que no se cumple, como los estilos de impresión, no bloquean el primer renderizado.

¿getComputedStyle cambia los estilos?

No. Devuelve un objeto vivo y de solo lectura con los valores resueltos. Para cambiar estilos usa element.style, clases o las APIs de hojas de estilos.

¿El CSSOM incluye estilos con display: none?

El CSSOM contiene las reglas. Es el árbol de renderizado el que omite los elementos con display: none y sus descendientes.