Pasan muchas cosas entre los primera solicitud HTTP y el Entrega final de una pagina web. La transmisión de datos y la canalización de representación del navegador requieren muchas tecnologías diferentes, una de ellas es la Modelo de objetos CSSo el CSSOM.
El modelo de objetos CSS toma el código CSS y representa cada selector en una estructura de árbol para un análisis más fácil. Tal vez no sea crucial que los desarrolladores comprendan completamente este concepto, pero es un tema valioso para estudiar si desea obtener más información al respecto. cómo los navegadores procesan el código en un sitio web funcional.
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
Pasan 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 representación del navegador requieren una gran cantidad de 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 Modelo de objeto de documento. Ambos forman parte de la ruta de renderizado crítica que es una serie de pasos que deben suceder para renderizar correctamente un sitio web. Todos estos procesos suceden automáticamentedetrá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 existe una manera fácil de decirle a una computadora que todos los párrafos en un .main-content div debe 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 creas sitios web.
Cómo funciona
Tanto el DOM como el CSSOM son ampliamente utilizado por todos los navegadores web para interpretar y renderizar páginas web. El siguiente diagrama es de la guía de fundamentos web para desarrolladores de Google y explica cómo DOM se representa en un navegador web.
Tanto en DOM como en CSSOM, toda la información es convertido de bytes en mapas digitales que representan cada elemento en un documento web. El proceso funciona de la siguiente manera:
- El navegador descarga el HTML para una página web.
- Mientras procesa el HTML, el analizador puede toparse con un elemento de enlace hacer referencia a una hoja de estilo externa.
- Esta hoja de estilo CSS es entonces analizado en un mapa utilizando las especificaciones del modelo de objetos CSS.
- El código resultante puede entonces ser aplicado a elementos en el 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.
Observe cómo algunas propiedades en el diagrama tienen colores de fuente grises más claros. Estas propiedades son heredado 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 HTML y CSS son convertido en fichas que luego puede ser entendidos como nodos por el navegador. Estos nodos son como objetos dentro de la estructura de árbol que define cómo debe construirse toda la página.
El CSSOM y el DOM son completamente modelos de datos separadospor lo tanto son analizados por separado unos de otros. pero ambos tienen estructuras de árboles similaresy 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 toda la representación sucede en el backend, realmente no necesita preocuparse mucho por el árbol CSSOM. Pero puede ser útil entender 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 debe verse cada elemento de la página. Si la página se cargó antes que el CSSOM, aparecería primero como HTML sin formato, 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 el 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 mostrando 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 CSS/JS externos y sus tiempos de carga.
La mejor manera de optimizar su sitio es creando 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 el CSSOM es educarse más sobre cómo funcionan realmente los sitios web.
Hay muchas cosas que damos por sentadas que hacen que Internet funcione sin problemas. Cuando comprenda un poco más sobre todo el proceso, podrá visualizar cómo todo se une y, con suerte, podrá apreciar un poco 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. Allá no hay mucho que manipular en el CSSOMpor lo que difiere un poco del DOM.
Sin embargo, sigue siendo una tecnología fundamental en el desarrollo web y debería aclarar aspectos importantes de la representación del navegador.
Hay muchos otros recursos que analizan el CSSOM y cómo funciona. Si desea obtener más información, aquí hay algunas publicaciones que recomiendo:
- Descripción general del modelo de objetos CSS
- Explorando el CSSOM: Haciendo un Analizador de Objetos CSS
- Lo que todo desarrollador frontend debe saber sobre la representación de páginas web