Como saben el navegador no representa los pixeles en pantalla por arte de magia, para ello debe estructurar nuestro código HTML, CSS y JavaScript de una manera en que lo pueda entender. Esta estructuración, sin importar la magnitud de nuestro proyecto, es compleja y ocurre en cuestión de segundos.
Ya sabemos que para que el navegador pueda entender el .html necesita una serie de pasos que lo ayuden a crear el DOM, si no, nuestro contenido no se vería. Sin embargo, el DOM solo carga el contenido, faltan los estilos, animaciones, entre otras cosas.
Teniendo en cuenta lo anterior, es fundamental saber que el CSS también se debe estructurar de tal manera que el navegador sepa específicamente qué estilo pertenece a qué elemento y para ello usa el modelo CSSOM. Este modelo, al igual que el DOM, se crea a partir de una serie de pasos con el fin de que el navegador pueda mostrar en pantalla cada uno de los estilos establecidos.
Para entender un poco más, veamos la siguiente infografía:
Aunque esto no termina aquí. Hace falta un proceso llamado Render Tree…
