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

pasaron muchas cosas en el medio la primera solicitud HTTP y Entrega final página web La transferencia de datos y la tubería de visualización del navegador requieren muchas técnicas diferentes, una de las cuales es modelo de objetos CSS, o CSSOM.

El modelo de objetos CSS toma el código CSS y muestra cada selector estructura de árbol para un análisis más fácil Puede que no sea importante para los desarrolladores comprender completamente el concepto, pero este es un tema valioso si desea obtener más información. Cómo muestran los navegadores el código en los sitios web en ejecución.

En este artículo, analizaré los conceptos básicos del modelo de objetos CSS y le mostraré cómo funciona.

¿Qué es CSSOM?

El término modelo de objetos CSS describe un Mapa de todos los selectores de CSS y propiedades relacionadas de cada selectorEstos estilos pueden ser el elemento principal o tener elementos secundarios anidados.

CSSOM es muy similar a DOM en HTML, que representa el modelo de objeto del documento. Ambos camino crítico para la representación Esta es una serie de pasos que deben suceder. Mostrar el sitio web correctamenteTodos estos procesos están sucediendo. automáticamente, detrás de escena.

Entonces, ¿por qué es importante CSSOM? Este es el mapa utilizado por el navegador Mostrar estilos CSS correctamente No hay una manera fácil de decirle a su computadora todos los párrafos en un párrafo .main-content Div debe tener una altura de fila adicional.

La solución es el modelo de objetos CSS Dibujar todos los elementos y atributos de su código CSS.

CSSOM facilita los navegadores Mostrar estilos de páginaTodo el proceso es muy técnico, pero vale la pena conocer un poco sobre el proceso, especialmente si está creando un sitio web.

cómo funciona

DOM y CSSOM son ambos Ampliamente utilizado por todos los navegadores web Interpretar y mostrar páginas web. La foto de abajo es de Guía básica de la red de desarrolladores de Google, y explica cómo Representación DOM en un navegador web.

En DOM y CSSOM toda la información es Convertir de bytes a mapa digital Representa cada elemento en el documento web. El proceso es el siguiente:

1. navegador Descargar HTML para páginas web.
2. Al procesar HTML, el analizador puede golpear elementos de enlace Referencia a hojas de estilo externas.
3. Entonces esta tabla de estilos CSS Analizar en un mapa usar Especificación del modelo de objetos CSS.
4. Entonces el código generado puede ser se aplica a elementos en el DOM.

Todo pasó muy rápido y pasó cada solicitud de páginaOtro diagrama a continuación muestra un Estructura de árbol ejemplar de CSSOM.

Observe cómo algunas propiedades en el gráfico tienen fuentes de escala de grises más claras. genético de los padresDebido a que el cuerpo tiene un tamaño de fuente específico, todos los elementos del cuerpo también reciben este tamaño de fuente a menos que se anule.

Las cadenas HTML y CSS son Conversión en tokens entonces puede ser por supuesto como un nudo a través de un navegador Estos nodos son como Objetos en estructura de árbol Determina cómo se debe estructurar toda la página.

CSSOM y DOM completamente modelo de datos separado, por lo que son analizados por separado unos de otrospero ambos tienen estructura similar del árbol, ambos tienen el mismo propósito: proporcionar una estructura de navegador que muestre y reconozca los diversos elementos de la página.

Por qué los desarrolladores web deberían estar interesados

debido a toda la representación sucede en el backend, realmente no tiene que preocuparse demasiado por el árbol CSSOM. Pero puede ser útil saber cómo funciona.

Una cosa para recordar es CSSOM debe estar completamente cargado antes de que se muestre la página web, ya que definirá la apariencia de cada elemento de la página. Si la página se carga antes que CSSOM, se mostrará primero como HTML simple, seguido de los estilos después de unos segundos.

Los navegadores evitan esto específicamente porque confunde al usuario final. Vale la pena señalar que CSSOM no se puede almacenar en caché; definitivamente el caso Recrear en cada página.

El archivo CSS real se puede almacenar en caché para una carga de activos más rápida, pero la página se muestra en el navegador Siempre debe ejecutar CSSOM AnalyzerEsto también significa que JavaScript se verá afectado. negativo de imagen y productividad.

te lo recomiendo mucho Lee este artículo Obtenga más información sobre los recursos CSS/JS externos y su tiempo de carga.

La mejor manera de optimizar su sitio web es hacer un cascada natural Recursos carga en tándem.

CSSOM se puede manipular usando JavaScript porque es API JS técnica. pero con Manipulación del DOM de JavaScript.

Una razón más importante para aprender sobre CSSOM es aprender más sobre cómo funciona realmente un sitio web.

Hay muchas cosas que damos por sentadas para que Internet funcione sin problemas. Cuando aprenda más sobre todo el proceso, puede imaginar cómo encaja todo y, con suerte, tener una idea de la existencia de la World Wide Web.

Más información

Espero que esta introducción le brinde una comprensión sólida de qué es el modelo de objetos CSS y cómo afecta las páginas web. No hay mucho que hacer en CSSOMpor lo que es un poco diferente de DOM.

Sin embargo, sigue siendo una tecnología clave en el desarrollo web y debería arrojar luz sobre aspectos clave de la representación del navegador.

Hay muchos otros recursos que analizan CSSOM y cómo funciona. Si quieres saber más, aquí hay algunos posts que recomiendo: