Cuando escribes index.html y lo abres en Chrome o Safari, sucede una coreografía de milisegundos que transforma texto plano en una interfaz visual. ¿Alguna vez te has preguntado qué pasa "bajo el capó"?
1. El Nacimiento del DOM
El navegador no "lee" el HTML como nosotros. Lo desglosa y crea el DOM (Document Object Model). Es un árbol genealógico donde el <html> es el abuelo, el <body> es el padre y tus etiquetas son los hijos. Si el DOM está roto, tu sitio no funciona.
2. El Árbol de Renderizado (Render Tree)
Mientras se crea el DOM, el navegador lee el CSS y crea el CSSOM. Luego, junta ambos para crear el Render Tree. Aquí es donde el navegador decide: "Este elemento se ve, este no (display: none)".
3. Layout y Paint (El momento de la verdad)
- Layout (Reflow): El navegador calcula el tamaño y la posición exacta de cada caja en la pantalla (geometría pura).
- Paint: Finalmente, el navegador "pinta" los píxeles (colores, bordes, sombras e imágenes).
Código: ¿Por qué importa el orden?
<head>
<script src="pesado.js"></script>
</head>
<body>
<h1>Contenido instantáneo</h1>
<script src="pesado.js"></script>
</body>
Tip para el Futuro Senior:
Cada vez que cambias un estilo con JavaScript (como el ancho de un div), obligas al navegador a repetir el proceso de Layout y Paint. Si lo haces muchas veces por segundo, la web se verá lenta. ¡Optimiza tus animaciones usando transform para evitar el Reflow!
Top comments (0)