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.
- ¿Qué es el marco de primavera?
- ¿Cuál es la diferencia entre un diseño paso a paso y una antena frontal en gimnasia?
- ¿Cuáles son las principales reglas que debo seguir para crear un sitio web que sea muy legible en general y agradable de leer en la oscuridad?
- Cómo optimizar el rendimiento de su CDN
- ¿Cómo te convertiste en desarrollador web? ¿Desde qué idioma empezaste?
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.