¿Cómo lee un navegador un documento HTML?

La función principal de un navegador es presentar el recurso web que elija, solicitándolo al servidor y mostrándolo en la ventana del navegador. El recurso suele ser un documento HTML, pero también puede ser un PDF, una imagen o algún otro tipo de contenido. El usuario especifica la ubicación del recurso utilizando un URI (Identificador Uniforme de Recursos).

El motor de renderizado comenzará a obtener el contenido del documento solicitado de la capa de red. Esto generalmente se hará en trozos de 8kB.

Después de eso, este es el flujo básico del motor de renderizado:

Figura: Procesamiento del flujo básico del motor

El motor de renderizado comenzará a analizar el documento HTML y convertirá elementos en nodos DOM en un árbol llamado “árbol de contenido”. El motor analizará los datos de estilo, tanto en archivos CSS externos como en elementos de estilo. La información de estilo junto con las instrucciones visuales en el HTML se utilizará para crear otro árbol: el árbol de renderizado.

El árbol de renderizado contiene rectángulos con atributos visuales como color y dimensiones. Los rectángulos están en el orden correcto para mostrarse en la pantalla.

Después de la construcción del árbol de renderizado, pasa por un proceso de “diseño”. Esto significa dar a cada nodo las coordenadas exactas donde debería aparecer en la pantalla. La siguiente etapa es pintar: el árbol de renderizado se atravesará y cada nodo se pintará con la capa de fondo de la interfaz de usuario.

Es importante entender que este es un proceso gradual. Para una mejor experiencia del usuario, el motor de renderizado intentará mostrar los contenidos en la pantalla lo antes posible. No esperará hasta que se analice todo el HTML antes de comenzar a construir y diseñar el árbol de renderizado. Se analizarán y mostrarán partes del contenido, mientras que el proceso continúa con el resto del contenido que sigue viniendo de la red.