https://s3-us-west-2.amazonaws.com/secure.notion-static.com/61fa5090-5e69-4daa-84b1-e94624e1d17e/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/44527194-bf6b-471a-b519-65bb6713de43/Untitled.png

DOM

Dom o Document Object Model, es un arbol que se genera con todos los elementos HTML que conforman nuestra pagina, cada elemento se le llama nodo.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f8f7b84c-85b7-4c8a-a9db-74da15caa0f6/Untitled.png

CSSOM

Css Object Model, este se encarga en cargar todos los estilos enlazados a nuestros elementos HTML. Permite leer y modificar el estilo de CSS de forma dinámica.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2e2394df-247b-4729-8eca-bc4317e12123/Untitled.png

Render Tree

El DOM y el CSSOM se combinan formando el Render Tree para computarizar el diseño de cada elemento visible. El navegador se encarga de interpretar todo esto para mostrarnos los colores, el texto, las imágenes, que es lo que vemos.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6e4b974e-bef3-4651-ad74-ca02c43321f0/Untitled.png

Layout

Cuando ya tenemos el Render Tree, el navegador comienza a distribuir los elementos en nuestro sitio web. Se compone de ciertas dimensiones en las que se colocará el contenido. Estos bloques suelen trazarse a través de etiquetas HTML comunes.

https://acornstudio.es/wp-content/uploads/2017/09/a114bcde3596d40684499375ee80eea3.gif

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ac7a9f1e-bda2-4adf-afc1-b996beb7c685/Untitled.png

Paint

Aqui el navegador renderiza toda la información de nuestra pagina web Dando todo el relleno como el texto, imagenes, videos.

JavaScript Engine