Mi amigo y compañero de trabajo Charly Páez compartió el otro día este documento que me parece algo fundamental para todo desarrollador hoy día. Está en inglés, pero no podía dejar de compartirlo con ustedes.
“How Browsers Work: Behind the Scenes of Modern Web Browsers”, es parte del portal HTML5 Rocks construido por Google, conteniendo introducciones, presentaciones y guías de referencia.
Como se explica en el prefacio, gran parte de este documento surge de la cuidadosa investigación de la desarrolladora israelí Tali Garsiel sobre las características internas y análisis del código de WebKit (Safari y Chrome) y Gecko (Firefox) los motores de presentación de código abierto que hoy suman aproximadamente un 60% del uso de la web. Aunque Internet Explorer no puede ser analizado de la misma manera, los lineamientos generales de su arquitectura seguramente no difieren fundamentalmente de lo que este documento cubre.
El contenido completo cubre los siguientes procesos, basados en el flujo típico debajo (dejo muchos términos si traducir para evitar confusiones):
- El motor de rendering
- Parsing y construcción del DOM (HTML, CSS, Scripts)
- Construcción del árbol de render
- Layout (distribución de los elementos)
- Painting (la aparición real de los elementos en pantalla)
- Cambios dinámicos
- Los hilos del motor de rendering
- Modelo visual de CSS2
Todo comienza con la descripción de alto nivel de la estructura de los navegadores, resumida en el siguiente diagrama:
El trabajo es bastante extenso y detallado, pero nuevamente lo recomiendo muy especialmente. No importa aprender todo ese nivel de detalle, pero leerlo detenidamente nos permite retener al menos algunos conceptos generales que nos ayudarán a comprender más fácilmente situaciones comunes en el desarrollo web.