Motores de render: de archivos a píxeles

3/23
Recursos

Los motores de renderizado son programas que traducen nuestro código en un lenguaje que entienda el navegador, de esta manera el programa sabrá que es lo que tiene que mostrar por pantalla al usuario.

¿Cuáles son los motores del navegador?

Los navegadores tienen sus propios motores: Chrome - Blink, Edge - Edge HTML, Safari - Webkit y Firefox - Gecko. Todos realizan esta compilación de manera diferente, pero con el mismo resultado, es decir, convierten los archivos a píxeles.

Motores de los navegadores comunes

Proceso de renderizado del motor del navegador

El motor del navegador realiza 5 pasos o procesos para compilar nuestro código hasta el renderizado por pantalla. Estos pasos son los siguientes:

  1. Transforma los archivos a un árbol de objetos HTML o CSS, estos se denominan DOM (Document Object Model) y CSSDOM (Cascade Style Sheet Object Model), respectivamente. Cada nodo en el árbol es una representación de los elementos que contiene el archivo HTML o CSS.
  2. Calcula el estilo correspondiente a cada nodo del DOM relacionado al CSSDOM.
  3. Calcula las dimensiones de cada nodo y dónde va en la pantalla.
  4. Pinta o renderiza los diferentes elementos como cajas o contenedores.
  5. Agrupa todas las cajas en diferentes capas para convertirlas en una imagen que se renderiza en pantalla.
Proceso de renderizado del navegador

Contribución creada por Andrés Guano (Platzi Contributor), con aportes de Rodrigo SenseiVJ Reyes (Platzi Contributor).

Aportes 111

Preguntas 14

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🤯 ¿Cómo así? ¿Motores?.. ¡Sí! Todos nuestros navegadores cuando los instalamos traen consigo un motorcito que les ayuda a traducir cada archivo que nosotros generamos, por ejemplo:
.

.
Esto es un archivo HTML (no te preocupes si no lo entiendes todavía, es solo un ejemplo para que sepas cómo se ve 👀).
.
Todo eso que vemos ahí es código que llegaremos a entender muy bien porque seremos developers bien pros 💪. Pero el navegador no lo entiende 😔… Es aquí en donde ese motorcito interviene, básicamente él se pone en medio y empieza a traducir toooooodo a algo que el navegador entiende. Es como si el navegador se hubiese contratado a su traductor personal 😎.

Los 5 pasos de los motores:

  1. Pasa los archivos de HTML a objetos (El DOM). Esto para que el navegador pueda entenderlo.
  2. Calcula el estilo correspondiente a cada nodo en el DOM.
  3. Calcula las dimensiones de cada nodo y va a empezar a estructurar la página web.
  4. Pinta las diferentes cajas.
  5. Toma las capas y las convierte en una imagen, para finalmente mostrar esta imagen en la pantalla.

les recomiendo el navegador Brave

Brave también usa Blink como motor, está enfocado en la privacidad del usuario y te dan la criptomoneda BAT por ver publicidad voluntariamente (ya que el navegador las bloquea automáticamente). Y dato importante, uno de sus fundadores es Brendan Eich, creador de Javascript.

Les comparto mis apuntes. 😄

Motores de renderizado

Cuando escribimos nuestros archivos HTML y CSS con ciertas etiquetas, selectores, atributos, propiedades, etc, todo eso el navegador no lo entiende y para poder entenderlo cada navegador tiene un motor que le permite entender y hacer visible en pixeles lo que nosotros hemos escrito.

Navegadores y sus motores

Cada navegador tiene diferentes motores, pero realizan el mismo proceso.

Pasos de los motores en general

  1. Transforma el HTML en objetos que el navegador puede entender que lo conocemos como DOM (Document Object Model).
  2. Calcula cada uno delos estilos que tiene que ir en cada uno de los nodos (elementos HTML). Agarra cada uno de los estilos y los añade a cada uno de los elementos del DOM.
  3. Calcula la dimensión de cada nodo, es decir, su posición, tamaño, estructura toda la página web.
  4. Pinta las diferentes cajas, ya teniendo todo lo anterior lo que hace es pintarlas.
  5. Agarra cada una de las cosas que ya se pintaron, pueden en diferentes capas, realiza una captura y eso lo que va a renderizar en el navegador.

DOM

Es el mismo HTML que conocemos pero pasados o transformados a objetos que en navegador entiende.

Este va estructurada cada una de las etiquetas comenzando por la principal y siguiendo con las demás.

Hola, les comparto mis apuntes tomando como referencia este video y algunos otros apuntes del curso anterior a este ‘Curso de Frontend Developer 2019’.

P.D. Nunca pares de aprender.

Apuntes:

Que bien explica la profesora💖💖 me encanta!

Mi navegador favorito es OperaGX, este usa Blink como motor de renderizado

Este es el Critical Rendering Path

Los nombres de los 5 pasos descritos en la clase son:

  1. DOM (Document Object Model).
  2. CSSOM (CSS Object Model).
  3. Render Tree.
  4. Layout.
  5. Paint.

Recomiendo ampliamente la lectura recomendada de la clase para profundizar sobre el funcionamiento de los motores (y aprender un poco mas sobre CSS). Tambien sirve para entrenar la lectura en ingles. 2 x 1

Amo sdijfiojfids

Les dejo este artículo para ampliar el conocimiento 😄

Estos pasos se conocen como el
CRP — Critical Render Path o Ruta de acceso de representación crítica

Conocer Mas

Notas de la clase:
El navegador no entiende el código HTML y CSS escrito en nuestro editor de texto.
Los navegadores poseen un motor el cual transforma el código HTML y CSS en algo que el navegador entienda y pueda pintarlo en pixeles para ser visualizados.
Cada navegador tiene su propio motor pero todos ellos hacen el mismo proceso.
Los motores realizan los siguientes 5 pasos

  1. Pasar los archivos HTML a objetos (DOM)
  2. Calcular los estilos que deben ir en los objetos del DOM.
  3. Calcular dimensión y posición de los objetos o nodos, estructurara la página.
  4. Pintar las diferentes cajas.
  5. Toma las diferentes capas y las convierte en un imagen para mostrar en la pantalla

Recomiendo este link para entender el proceso y, sobre todo, la relación entre los términos que utiliza la profe, como: nodos, elementos y etiquetas.
https://uniwebsidad.com/libros/javascript/capitulo-5/arbol-de-nodos

es bueno saber de los motores y como funcionan ahora las extensiones te lo ponen fácil escribiendo el código, pero saber como funciona creo yo es mucho mejor para poder tener la adaptabilidad correcta.


Justo cuando pensaba que la magistral explicación de la profesora era insuperable, me voy a la lectura recomendada y quedé como: PERO QUE ES ESTA BELLEZA !!!

Háganse un gran favor y revisen la lectura recomendada. It’s beatiful. Y bueno siempre podemos traducir (está en inglés, pero muy entendible)

https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

Al momento de que comencemos a programar en Javascript (En esta escuela evidentemente te vas a convertir en un experto). Conocerán que tenemos un motor V8 en nuestro navegador de Google Chrome 😱.

Para saber mas, te recomiendo el curso de JavaScript Engine (V8) y el Navegador

Es un curso bastante bueno y corto. Te lo recomiendo muchísimo. Una vez que realices el curso comparte con nosotros tu certificado aquí abajo.

Y recuerdo, NEVER STOP LEARNING 💚

Cada navegador implementa su propio motor de renderizado.
Todos cumplemn con los pasos de :

  1. Pasar los archivos a objectos en el DOM
  2. Calcular el estilo correspondiente a cada nodo del DOM
  3. Calcular las dimensiones de cada nodo y donde va en la pantalla.
  4. Pinta las cajitas!
  5. Toma fotos y convierte en imagenes que son las que se muestran en la pantalla para el usuario.

Algo así sería…

Añado a lo que nos cuenta la profe:

super bien, conceptos que se me había olvidado

Estoy seguro que e hecho este curso 3 veces en 2 años. a alguien le a pasado?

Ya había tomado un curso de frontend pero no conocía nada de este tema. Gracias Platzi

Safari es el nuevo Internet Explorer

Acá les dejo un resumen de este módulo llamado > Introdución

HTML:
- Es un lenguaje de marcado de hipertexto.
- Su función es estucturar nuestro sitio web, como un esqueleto.
CSS:
- Hoja de estilo en cascada.
- Permite generar estilo a nuestro sitio, ya sea a imágenes, botones, texto, etc.

Ambas tecnologías son importantes ya que nos permiten crear sitios modernos y estáticos.

Motores de renderización:
- Se encargan de decirle al navegador como mostrar el contenido de HTML y CSS dentro de una ventana. Los navegadores web no comprenden la sintáxis de estas dos tecnologías.

    * Tipos de motores:
            - chrome --> Blink.
            - Edge --> Edge HTML.
            - Safari --> Webkit.
            - Firefox --> Gecko.

    * Realizan los siguientes pasos:
            1) Tranforma el documento HTML en objetos, esto es conocido como DOM y permite al navegador poder entender el contenido de un HTML.
            2) En este paso, toma el CSS y lo implementa en los diferentes objetos del DOM.
            3) Cálcula el tamaño de cada objeto y lo pinta en pantalla.
            4) Pinta cada caja implementada en el paso anterior.
            5) Tras el paso anterior es momento de mostrarselas al usuario.

    * Conceptos:
            - DOM --> Document Objet Model. En simples palabras tranforma el documento HTML en ua estructura de árbol y ordenada de forma jerárquicamente. Para acceder al DOM lo haremos utilizando el lenguaje de programaciópn Javascript.

Esto es nuevo para mí!.
Tendré que hacer mis notas, aunque esto ya está en el manual del inicio, cierto?

https://es.wikipedia.org/wiki/Motor_de_renderizado Acá puedes profundizar sobre los motores de renderizado y cual usa cada uno de los navegadores que conocemos.

Los navegadores tienen un motorcitos que le ayudan a traducir nuestro codigo a algo que ellos si puedan entenderlo de esta manera los navegadores pueden convertirlos en pixeles y ser representados visualmente🌎❤️

Apuntes:
Los motores de renderizado nos permiten pasar nuestro código que hemos escritos en un editor previamente y transformarlo a un formato que el navegador pueda entenderlo.
Cada navegador tiene ciertos motores y aunque sean diferentes, cumplen las misma funciones.
Todos lo motores comparten 5 pasos los cuales son:

  1. Transformar el HTML en objetos que el pueda entender, lo cual se conoce como DOM (Document Object Model en español Modelo de Objetos del Documento)
  2. Calcula cada uno de los estilos que debe ir en cada uno de los nodos, en donde el DOM estructura las etiquetas.
  3. Calcula las dimisiones de cada nodo, en donde se define, en donde va a ir y que tamaño va a tener.
  4. Pinta las diferentes cajas en donde ya tiene la estructura HTML y CSS.
  5. Captura los elementos o capas pintadas para mostrarlas en pantalla.

Motores de renderizado

Cuando escribirmos el HTML o el CCS. Lo escribimos con la sintaxis del código, pero el navegador no entiende nada de ese código es por esto que los navegadores tienen este motor que traduce esta información y para entenderlo, poderlo convertir en pixeles y así nosotros poder visualizarlo.

Estos motores tienen 5 pasos:

  1. Pasa los archivos (HTML) a objetos, se llama DOM (Document Object Model)
  2. Calcula el estilo correspondiente a cada nodo DOM. Va creando etiquetas para organización.
  3. Calcula las dimensiones de cada nodo y donde van en la pantalla, que tamaño va a tener.
  4. Pinta las cajas, tiene la estructura, el html, css y acá las pinta.
  5. Toma las capas y las convierte en una imagen para mostrar en pantalla. Toma una foto y renderiza para mostrar al usuario.

Motores de renderizado

  • Se encarga de transformar el código escrito en un lenguaje capaz de ser interpretado en el navegador.
  • Chrome - Blink.
  • Edge - Edge HTML.
  • Safari - Webkit.
  • Firefox - Geko.
  • Procesos del motor de renderizado:
    1. Convierte los archivos en objetos - DOM (Document Object Model); objetos que el navegador puede comprender.
    2. Calcula los estilos correspondientes a cada nodo DOM.
    3. Calcula las dimensiones de cada nodo y dónde van en la pantalla.
    4. Pinta las diferentes cajas.
    5. Toma todas las capas y las convierte en una imagen para mostrar en la pantalla.

Que bien explica profe !!! 😃

Últimamente utilizo el navegador Brave, pero de vez en cuando el chrome dev tools para desarrollar.

Motores de Render: Es pasar de archivos HTML, CSS a pantalla
- Los navegadores tienen motores, los más comunes
- Chrome - Blink
- Edge - Edge HTML
- Safari - Webkit
- Firefox - Gecko
El navegador hace 5 pasos
- Pasa los archivos a objetos, más conocido como DOM
- DOM: Es una transformación del código de HTML escrito por nosotros a objetos entendibles para el navegador.
- Calcula el estilo correspondiente a cada nodo DOM
- Calcula las dimensiones de cada nodo y donde va en pantalla
- Pinta las diferentes cajas
- Toma las capas y las convierte en una imagen para mostrar en pantalla

Excelente explicación

DOM Document Object Model

Yo uso Cent, porque si uso google se me quema la pc.

Increíble todo lo que va detrás y uno ni se entera

Todos los motores funcionan de una forma parecida y todos siguen los siguientes pasos:

*Transformar el HTML en objetos que el navegador pueda entender, a este proceso se le conoce como DOM (Document Object Modele) que es basicamente ese HTML pero convertido en objetos que el navegador pueda entender
*Calcula cada uno de sus estilos que tiene que ir en cada uno de los nodos, el DOM va estructurando cada una de esas etiquetas
*Calcula las dimensiones de cada uno de esos nodos, va a decir en donde van, que tamaño tendrán y empezará a estructurar toda esa pagina web
*Pintar todas las diferentes cajas
*Tomar cada una de esas cosas que ya pintó, tomar una foto de esa información, y renderizarlo hacía el navegador para que así quedé mostrada en la pantalla

Apuntes de la clase:

  • Los motores de renderizado son los que convierten los archivos a pixeles, y son diferentes dependiento del tipo de navegador que se este utilizando
  • El navegador realiza 5 pasos esenciales al momento de mostrar los archivos: (1) Pasa los archivos a objetos,
    (2, 3) Calcula el estilo, dimension y posicion de cada nodo, (4) Aplica los estilos siguiendo la jerarquia. (5) Toma todos los objetos con los estilos ya aplicados y convierte todo a una imagen que es la que se muestra.
    Si entendemos el archivo como una estructura de arbol, los nodos se pueden entender como contenedores. Nodos inferiores son contenidos en otros (nodos intemedios) y la raiz del arbol seria el contenedor universal del archivo, que contiene a todos. Se aplican los estilos por orden de jerarquia.

El motor que tiene Brave es Blink V8 FYI.

los 5 pasos derl navegador
1 pasa los arhivos y los convierte en doom
2 calcula y el estilo
3 calcula las dimensiones que lo diste
4 pinta la pagina web
5 toma las capas y las convierte en imagenes

Como dato curioso, varios navegadores estan basados en Chromium, que no es nada mas que un navegador open-source soportado por Google. Brave, Vivaldi, Edge e incluso Coogle Chrome estan basados en Chromium

Y pos esto es que es importante la semántica. Ya que al calcular los estilos para colocarlos en el DOM, le ayudamos al navegador a entender un poco más nuestro código, y a su vez a google le gustará esto y nos posicionará. xD

Wow, yo los conocía como motor de navegación, ahora sé que son lo mismo!

MOTORES DE RENDER DE ARCHIVOS A PIXELES

El trabajo que hace el navegador cuando esta trabajando con nuestros archivos convierte nuestros archivos a un lenguaje que entienda la maquina para poder visualizarlo

Navegadores

chrome - blink

edge - edge html

safari - webkit

firefox - gecko

estos motores son los encargados de interpretar nuestro código para ser representado

este es el proceso de conversión

  1. Pasa los archivos a objetos
  2. Calcula el estilo correspondiente a cada nodo
  3. calcula las dimensiones de cada nodo y donde va en la pantalla
  4. pinta las diferentes cajas
  5. toma las capas y las convierte en una imagen para la pantalla

Personalmente me gusta bastante el navegador Edge Chromium 🙂, solo por las opciones que brida de las pestañas verticales, las colecciones y como es la interfaz de cómoda🌟🌟, que te hace la vida más fácil, pero al momento de DevOps o inspeccionar prefiero Google Chrome😄.

La función principal de un motor de navegación es transformar los documentos HTML y otros recursos de una página web en una representación visual interactiva en el dispositivo del usuario (esta función se denomina renderización).
El motor de renderizado es software que toma contenido marcado (como HTML, XML, archivos de imágenes, etc.) e información de formateo (como CSS, XSL, etc.) y luego muestra el contenido ya formateado en la pantalla de aplicaciones.

Les recomiendo el navegador Google Chrome por las DevTools, me parece que son muy buenas, pero claro, lo mejor es que cada uno de nosotros vayamos descubriendo que navegador nos gusta más así como cuál nos conviene más

Muchas gracias, muy buena explicación 😄

Excelente clase 🎅

wow no dabia nada de esos motores!!

wow!

MUY BUENOS LOS VIDEOS

mi motor ❤️ por Teffy 😍

Uno de los conceptos nuevos para mi fue el DOM(document object model o modelo de objeto de documento), es una interfaz de programación para los documentos HTML. Va a definir de que forma los programas pueden acceder a modificar su estructura, estilo y contenido.

excelente contenido, un 10.

Motores de renderizado

exelente

¿Soy el único que le encanta cuando Estefany dice: «básicamente»?

Vamos a hablar de motores, pero no de los de Toyota, Mazda, Ferrari o otros. Hablemos de los motores de renderizado del navegador ¿qué, cómo?
Sí, los navegadores tienen motores que tienen como función transformar HTML y CSS en pixeles para que los podamos visualizar o que el navegador entienda.
En otras palabras, es como cuando el motor del Mazda o cualquier carro convierte la gasolina en energía para que el carrito pueda andar.

Se puede decir que gracias a los render la codificación que se realiza puede verse bonita y accesible para los usuarios, de lo contrario si no existieran seria imposible leer el contenido por medio de etiquetas si no se tiene un conocimiento previo no.

¿Para qué nos sirven los motores de renderizado?
Para pasar de archivos a píxeles en pantalla

Me esta encantando este curso, por que me esta enseñando todo lo que ocurre cuando digito mi código y como lo esta reconociendo el navegador.

El concepto de DOM,lo vas a encontrar a lo largo de tu carrera como Frontend Developer.

Los motores de render transforman el código que es entendible para nosotros (HTML, CSS) a un código qué es entendible para los navegadores y que puedan pasarse a pixeles para que nosotros como usuarios los podamos visualizar.

El trabajo principal de un motor de renderizado es transformar documentos HTML y otros recursos de una página web en una representación visual interactiva en el dispositivo de un usuario.

Según como lo entendí: 1) Traduce a un idioma que lo entienda (DOM) 2) Le da una lectura rápida para saber que hay que hacer 3) Analiza que como lo puede hacer 4) Lo hace 5) Lo traduce de su idioma a HTML para que el navegador lo entienda

Blink -> Está desarrollado en C++.
Gecko -> Desarrollado con C++, Rust❤ y JavaScript💛

Todos los navegadores web incluyen necesariamente algún tipo de motor de renderizado. Sin embargo, el término “motor de renderizado” solo alcanzó un uso popular cuando el proyecto Mozilla diseñó el motor de su navegador (Gecko) como un componente aparte del propio navegador. En otras palabras, el motor de Mozilla era reutilizable por otros navegadores diferentes, y mucha gente se empezó a referir a Gecko como un “motor de renderizado” en sí, en lugar de como una parte del navegador.

Está bien interesante la lectura 😄, pueden ver un poco más acá

Corríjanme si estoy mal, lo agradecería mucho.
Lo que la profesora nos explico se llama critical rendering path y consta de 5 pasos

  1. DOM
    Aquí se genera un árbol con todas las etiquetas de
    HTML (palabras, párrafos, imágenes, etc.) y se lee
    lineal por línea y se le llama mapeo y comienza a
    formar el árbol con todos sus nodos y como los
    estilos van en la parte del <head> </head> cuando se
    llega a esa parte se genera el paso 2
  2. CSSOM (css object model)
    Similar al DOM pero trata los estilos, genera un
    árbol independiente, ligado a los elementos a los que
    pertenecen, para posterior mente fusionarlos
  3. Render tree
    Es la fusión de ambos árboles, el navegador ya sabe
    que tiene que hacer con los archivos
  4. Layout
    Es la maqueta del proyecto, el navegador identifica
    en que parte va a ir cada cosa, genera contenedores
    de información en base al render tree
    Genera la maqueta del proyecto sin inyectarle el
    contenido y también los cálculos matemáticos
    necesarios para formar los textos, colores, etc.
  5. Paint
    Aquí se coloca la información y todo el relleno
    el proyecto se ve como se debería ver y se comienza
    a interactuar con la página web
    Es importante entender estos puntos ver donde hay cuellos de botella para crear páginas web con buen performance.
    Si tuve algún error, les agradecería mucho el feedback 😄, apenas llevo un par de meses queriendo ser frontend dev y quería aportar aunque sea un poquito de lo que he ido viendo.

Mis apuntes y mi humilde aportación:
Palabras clave:

Navegador: nos hace acceder a la red tiene un motor.

Motor de renderizado: pasan los archivos a píxeles.

DOM: Pasar el Html en objetos que el navegador pueda entender.

Apuntes de la Maestra:

los navegadores tienen motores

NAVEGADOR MOTOR
chrome blink
edge edge html
safari webkit
firefox gecko

El navegador hace 5 pasos:

paso 1: Pasa los archivos a objetos

paso 2: calcula el estilo correspondiente a cada nodo y dom.

paso 3: calcula las dimensiones de cada nodo y dónde va en la pantalla.

paso 4: pinta las diferentes cajas.

paso 5: toma las capas y las convierte en una imagen para mostrar en pantalla.

Apuntes míos:

básicamente el navegador usa el motor de renderizado para hacer que este pueda generar algo que sea visible y entendible, ya que con lo que hemos escrito de código simplemente no todo mundo lo va a entender y inclusive es tedioso a la vista a la par que noes cómodo para nadie.

Podemos observar que los pasos que hace el navegador es convertir ese código en imágenes e iconos, me gusta verlo como una función, en donde entran datos de código y tras la función nos sale algo nuevo, imágenes y texto.

Resulta algo confuso cuando menciona ciertos términos … Quizas están en algún curso anterior y no me he dado cuenta. Por ej que es un DIV, un nodo, un estilo, a qué se refiere con capa? supongo será algo parecido a las capas de Ilustrator o PS.

Blink

Blink es un motor de renderizado para navegadores de código abierto desarrollado por Google, que forma parte de Chromium (y por lo tanto también de Chrome). Concretamente, Blink es una copia de la librería WebCore de WebKit, que se encarga del diseño, renderizado, y del DOM.

Datos✍🏻

📌 DOM

Document Object Model: es una interfaz de programación (API) para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido.

Notas 📒

✏️ ¿Qué hace un Motor de renderizado?

Transforma el código HTML y CSS entendible por los humanos a un código que los navegadores entienden.

✏️ Pasos que realiza un motor

  1. Convierte el HTML a objetos del DOM.
  2. Calcula el estilo definido para cada nodo en el DOM.
  3. Calcula las dimensiones de cada nodo y estructura la página web.
  4. Pinta las diferentes cajas.
  5. Toma las capas y las convierte en una imagen para mostrar en la pantalla.

✏️ Motores de renderizado

Motores de cada navegador para HTML y CSS

  • Blink → Chrome
  • Edge HTML → Edge
  • Webkit → Safari
  • Gecko → FireFox

Motores de cada navegador para JavaScript

  • V8 Engine → Chrome)
  • Spider Monkey → Mozilla Firefox
  • Chakra → Microsoft Edge
  • JavaScriptCore → Apple Safari

Cabe anotar que el navegador Edge en sus nuevas versiones, al estar basado en chromium utiliza el motor Blink (el mismo de Chrome). En lo personal, es el navegador que utilizo.

Esto lo explican más a fondo en el curso de fundamentos de ingeniería de software.

Primer comentario en PlatziDay. Aqui Walter Leon , desde Colombia.

grande HTML

pro-tip, cuando vayamos adquiriendo más experiencia y utilicemos HTML y CSS para generar PDFs o Emails hay que tener en cuenta que la mayoría de features en CSS no existen o no funcionan de la misma manera cuando queramos generar estos. Más que nada por estos motores de renderizado que se ocupan al momento de generarlos (como QtWebkit)

Muy interesante como todo esta interconectado, y como algo que se ve sencillo lleva un gran trabajo detrás.

Para complementar esta clase, recomiendo este curso ¿Cómo funciona el navegador? a partir de la clase 19 en adelante. 😃

Entonces el motor render lo que hace es tomar los archivos y a través de un proceso ocurre que se plasma en el navegador.

Diferentes motores tienen diferentes formas de ir haciendo ese proceso, pero al final logran lo mismo

Que es traducir de nuestro lenguaje a binario (supongo) que son representados en nuestras pantallas

¡¡Brillante explicación!! A seguir aprendiendo.

El que cada navegador tenga un motor no siempre es muy bonito… (Spoiler Alert) En los CSS en muchas ocasiones, es necesario especificar el motor para que el estilo pueda funcionar correctamente:

-webkit-animation-trigger
-webkit-app-region
-webkit-appearance
-webkit-aspect-ratio

etc.

No sabia estos pasos, importante leer el link y llevarlo a fondo.

La función principal de un motor de navegación es transformar los documentos HTML y otros recursos de una página web en una representación visual interactiva en el dispositivo del usuario.

repasando el curso

Excelente explicación, no tenia conocimiento sobre el concepto y la existencia de los motores de renderizado.

Wow! Gracias profe, la verdad es que no tenia ni idea de que nuestros navegadores hacian todo esto para interpretar nuestro codigo HTML & CSS

Motores de Render:
El navegador no entiende nada de lo que nosotros escribimos al programar en un editor de código.
.
Entonces… Lo que sucede es que el o los navegadores tienen un motor que permite procesar o transformar ese código que es entendible para un ser humano, lo transforma de forma que los navegadores entiendan y puedan procesar, esto permite que también se puedan pintar píxeles para que nosotros como usuarios podamos visualizar.