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: