¿Cómo representa el navegador la página?

El proceso general de un navegador que muestra una página:

1. El navegador analiza el código fuente html y luego crea un árbol DOM.

En el árbol DOM, cada etiqueta HTML tiene un nodo correspondiente y cada texto también tiene un nodo de texto correspondiente. El nodo raíz del árbol DOM es documentElement, que corresponde a la etiqueta html.

2. El navegador analiza el código CSS y calcula los datos de estilo finales. Construya el árbol CSSOM.

Ignorará directamente la sintaxis ilegal en el código CSS. Al analizar CSS, las prioridades se definen en el siguiente orden: Valores predeterminados del navegador

3. Árbol DOM CSSOM->árbol de representación.

El árbol de renderizado es un poco como el árbol DOM, pero hay diferencias. El árbol DOM corresponde a la etiqueta html uno a uno, pero el árbol de representación ignora los elementos que no necesitan representarse, como los elementos de encabezado y visualización: ninguno. Además, cada línea del texto grande es un nodo independiente en el árbol de representación. Cada nodo en el árbol de renderizado almacena las propiedades CSS correspondientes.

4. Una vez creado el árbol de representación, el navegador puede dibujar la página directamente en la pantalla de acuerdo con el árbol de representación.

Los cuatro pasos anteriores no se completan en secuencia al mismo tiempo. Si modifica el DOM o CSSOM, se repetirá el proceso anterior. De hecho, CSS y JavaScript suelen modificar el DOM o CSSOM varias veces.