Cómo entender los principios de representación de HTML y CSS

Para comprender los principios de representación de HTML y CSS, comience con los siguientes aspectos:

Todos los tipos de representación HTML comienzan desde el navegador, que se divide en dos categorías: análisis del navegador y Representación del navegador Pasos

1. Análisis del navegador

1. El navegador realiza la resolución del nombre de dominio a través de la URL solicitada, inicia una solicitud al servidor y recibe archivos (HTML, CSS, JS, Imágenes, etc.).

2. Después de cargar el archivo HTML, comience a construir el árbol DOM

3. Después de cargar el archivo de estilo CSS, comience a analizar y construir el árbol de reglas CSS

4. Javascript Después de cargar el archivo de script, ¿operar el árbol DOM y el árbol de reglas CSS a través de la API DOM y la API CSSOM?

2. El motor del navegador utiliza el árbol DOM y el árbol de reglas CSS. Árbol de representación

2. El árbol de representación no corresponde al árbol DOM. Por ejemplo, el contenido de la etiqueta o los nodos de elemento con visualización: ninguno; incluido en el árbol de renderizado.

3. Utilice el árbol de reglas CSS para hacer coincidir el árbol DOM para las coordenadas de posicionamiento y el tamaño, si se debe ajustar y atributos como posición, desbordamiento, índice z, etc. Este proceso se llama Flujo o Diseño.

4. El proceso final de dibujar la página web llamando a la API GUI nativa se llama Paint.

Diagrama del principio de renderizado: