La guía para principiantes del modelo de objetos CSS (CSSOM)
Mucho pasa entre los primera solicitud HTTP y el Entrega final de una página web. La transmisión de datos y el canal de renderizado del navegador requieren muchas tecnologías diferentes, una de ellas es la Modelo de Objeto CSS, o la CSSOM.
El modelo de objetos CSS toma el código CSS y representa cada selector en una estructura de árbol para facilitar el análisis. Quizás no sea crucial para los desarrolladores entender completamente este concepto, pero es un tema valioso para estudiar si desea obtener más información sobre Cómo los navegadores hacen el código en un sitio web de trabajo.
En esta publicación, cubriré los conceptos básicos del modelo de objetos CSS y te mostraré cómo funciona..
¿Qué es CSSOM??
El término Modelo de Objeto CSS describe una 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 a la DOM en HTML, que significa Documento Objeto Modelo. Ambos son parte de la ruta de representación crítica que es una serie de pasos que deben pasar a renderizar correctamente un sitio web. Todos estos procesos suceden. automáticamente, entre bastidores.
Entonces, ¿por qué es importante el CSSOM? Es el mapa utilizado por 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 de una .contenido principal div debe tener altura de línea adicional.
La solución es el modelo de objetos CSS que mapea todos los elementos y propiedades desde tu código CSS.
CSSOM hace que sea más fácil para el navegador estilos de render en la página. Todo es muy técnico, pero vale la pena entender un poco sobre el proceso, especialmente si creas sitios web..
Cómo funciona
Tanto el DOM como el CSSOM son utilizado extensivamente por todos los navegadores web Para interpretar y renderizar páginas web. El siguiente diagrama es de la guía de Fundamentos de Google Developers Web, y explica cómo DOM se representa en un navegador web.
Tanto en el DOM como en el CSSOM, toda la información es convertido de bytes en mapas digitales que renderiza cada elemento en un documento web. El proceso funciona de la siguiente manera:
- El navegador descarga el HTML para una página web.
- Mientras se procesa el HTML, el analizador puede toparse con un elemento de enlace referenciar 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 ser Aplicado a elementos en el DOM..
Todo esto sucede muy rápidamente, y ocurre con cada solicitud de una sola 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 entendido como nodos por el navegador. Estos nodos son como objetos dentro de la estructura de árbol que define cómo se debe construir toda la página.
El CSSOM y el DOM son completamente modelos de datos separados, por lo tanto son analizado por separado el uno del otro. Pero ambos tienen estructuras de arbol similares, y ambos tienen el mismo propósito: dar 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 necesitas preocuparte mucho por el árbol CSSOM. Pero puede ser útil entender cómo funciona..
Una cosa para recordar es que la 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 la CSSOM, aparecería primero como HTML plano, seguido de los estilos unos segundos después..
Los navegadores específicamente evitan eso 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.
Recomendaría 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 mediante la elaboración de un cascada natural de recursos que se cargan en tandem.
Es posible manipular el CSSOM usando JavaScript porque técnicamente es una API de JS. Pero no tiene mucho de propósito en comparación con la manipulación de DOM de JavaScript.
La razón más importante para aprender sobre el CSSOM es educarse mejor sobre cómo funcionan realmente los sitios web..
Hay muchas cosas que damos por sentado que hacen que Internet funcione sin problemas. Cuando entienda un poco más acerca de todo el proceso, podrá visualizar cómo se integra todo el asunto y, con suerte, ganar algo de aprecio por la existencia de la World Wide Web.
Otras lecturas
Espero que esta introducción pueda darte 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 el 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 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 de Frontend debería saber sobre el procesamiento de páginas web
