SlideShare una empresa de Scribd logo
1 de 52
Descargar para leer sin conexión
Entendiendo a nuestro
Navegador Web
Ezequiel Maraschio
Sobre mí...
Agenda
¿Por qué es importante saber
cómo funciona un navegador?
Top Players
Componentes
User Interface
Browser Engine
Tasks
- Expone los métodos para cargar una URL y navegarla
- Se encarga de las notificaciones con respecto a la carga de la
URL hacia el usuario
- Notifica errores de capas siguientes a la UI
Rendering
Engine
Tasks
- Representar visualmente un documento
- Interpreta el HTML, JS y CSS en lo que ve el usuario
- Corrige errores de markup
Networking
Tasks
- Comunicación
- Traducciones de caracteres
- Interpretación de los MIME
- Cache de red
JS Interpreter
UI Backend
Data Storage
Hypertext
Transfer
Protocol
HTTP
¿Y luego?
Domain Name
System
DNS
Demo
HTML & CSS
Rendering
Engine
¿Qué habíamos dicho que era?
Rendering
Engine Flow
1. Interpretar el HTML y construir el árbol en
base al modelo de objetos del documento
2. Asociar el CSS a los objetos del árbol
3. Posicionar los objetos del árbol
4. Pintar los objetos del árbol
<html>
<body>
<p>
Hola Mundo
</p>
<div>
<img src="example.png"/>
</div>
</body>
</html>
1. Armar el DOM
1. Armar el DOM
2. Asociar el CSS a los objetos del árbol
3. Posicionar los objetos del árbol
¿Y ahora?!
¿Preguntas?
@emaraschio
ezequiel.maraschio@gmail.com
http://www.html5rocks.com/es/tutorials/internals/howbrowserswork/
http://arvindr21.github.io/howBrowserWorks/
http://www.slideshare.net/quangntta/web-browser-architecture-49196
378
http://gs.statcounter.com/
https://vimeo.com/44182484
https://docs.google.com/presentation/d/1ZRIQbUKw9Tf077odCh66OrrwRI
VNLvI_nhLm2Gi__F0
Fuentes

Más contenido relacionado

La actualidad más candente

Introduccion a la programacion web
Introduccion a la programacion webIntroduccion a la programacion web
Introduccion a la programacion webRobert Rodriguez
 
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y CookiesDesarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y CookiesDidier Granados
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Mercedes Garcia
 
Java Database Connectivity (JDBC)
Java Database Connectivity (JDBC) Java Database Connectivity (JDBC)
Java Database Connectivity (JDBC) carla98_lisbet
 
Php book administracion
Php book administracionPhp book administracion
Php book administracionlcardenas
 
¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?aitorgr
 

La actualidad más candente (11)

Melaniee
MelanieeMelaniee
Melaniee
 
Libro Virtual
Libro VirtualLibro Virtual
Libro Virtual
 
La Web
La WebLa Web
La Web
 
Introduccion a la programacion web
Introduccion a la programacion webIntroduccion a la programacion web
Introduccion a la programacion web
 
Servicio web
Servicio webServicio web
Servicio web
 
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y CookiesDesarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
Desarrollo de Aplicaciones Web II - Sesión 08: Sesiones y Cookies
 
Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia Dreamweaver- mercedes garcia
Dreamweaver- mercedes garcia
 
Java Database Connectivity (JDBC)
Java Database Connectivity (JDBC) Java Database Connectivity (JDBC)
Java Database Connectivity (JDBC)
 
Php book administracion
Php book administracionPhp book administracion
Php book administracion
 
¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?
 
Dinarys duran
Dinarys duranDinarys duran
Dinarys duran
 

Similar a Entendiendo a nuestro navegador web

Como funciona tu navegador web
Como funciona tu navegador webComo funciona tu navegador web
Como funciona tu navegador webEzequiel Maraschio
 
01.BCulinary_infor_TICs
01.BCulinary_infor_TICs01.BCulinary_infor_TICs
01.BCulinary_infor_TICsUrko Zurutuza
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js IntroduccionMayer Horna
 
Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Karla Arosemena
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDidier Granados
 
Páginas web en joomla
Páginas web en joomlaPáginas web en joomla
Páginas web en joomlalumecas
 
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCXTR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCXRojasAngel2
 
Framework presentacion
Framework presentacionFramework presentacion
Framework presentacionFrancisco Cain
 
Programación Optimizada - Search Congress Valencia 2009
Programación Optimizada - Search Congress Valencia 2009Programación Optimizada - Search Congress Valencia 2009
Programación Optimizada - Search Congress Valencia 2009ferranbonas
 
introducción tecnologías web
introducción tecnologías webintroducción tecnologías web
introducción tecnologías webevelynfarro06
 

Similar a Entendiendo a nuestro navegador web (20)

Como funciona tu navegador web
Como funciona tu navegador webComo funciona tu navegador web
Como funciona tu navegador web
 
01.BCulinary_infor_TICs
01.BCulinary_infor_TICs01.BCulinary_infor_TICs
01.BCulinary_infor_TICs
 
GOOGLE ESTANDARES EJEMPLOS
GOOGLE ESTANDARES EJEMPLOSGOOGLE ESTANDARES EJEMPLOS
GOOGLE ESTANDARES EJEMPLOS
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Clase 1 Introducción al Desarrollo Web
Clase 1 Introducción al Desarrollo WebClase 1 Introducción al Desarrollo Web
Clase 1 Introducción al Desarrollo Web
 
Servicios web
Servicios webServicios web
Servicios web
 
Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
 
Páginas web en joomla
Páginas web en joomlaPáginas web en joomla
Páginas web en joomla
 
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCXTR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
TR1 - FORMATO ALUMNO ROJAS RIVERA ANGEL.DOCX
 
Tutor Java Web
Tutor Java WebTutor Java Web
Tutor Java Web
 
Framework presentacion
Framework presentacionFramework presentacion
Framework presentacion
 
Actividad #3
Actividad #3Actividad #3
Actividad #3
 
Actividad #3
Actividad #3Actividad #3
Actividad #3
 
Aplicaciones Web
Aplicaciones WebAplicaciones Web
Aplicaciones Web
 
Programación Optimizada - Search Congress Valencia 2009
Programación Optimizada - Search Congress Valencia 2009Programación Optimizada - Search Congress Valencia 2009
Programación Optimizada - Search Congress Valencia 2009
 
Recursos Web 2.0
Recursos Web 2.0Recursos Web 2.0
Recursos Web 2.0
 
Tutor html
Tutor htmlTutor html
Tutor html
 
Conocimientos de aplicaciones web
Conocimientos de aplicaciones webConocimientos de aplicaciones web
Conocimientos de aplicaciones web
 
introducción tecnologías web
introducción tecnologías webintroducción tecnologías web
introducción tecnologías web
 

Más de Ezequiel Maraschio

Fullstack conf 2017 - Basic dev pipeline end-to-end
Fullstack conf 2017 - Basic dev pipeline end-to-endFullstack conf 2017 - Basic dev pipeline end-to-end
Fullstack conf 2017 - Basic dev pipeline end-to-endEzequiel Maraschio
 
#Sysarmy meetup 2.1 // to-do lists - arma de doble filo
#Sysarmy meetup 2.1 // to-do lists - arma de doble filo#Sysarmy meetup 2.1 // to-do lists - arma de doble filo
#Sysarmy meetup 2.1 // to-do lists - arma de doble filoEzequiel Maraschio
 
Golang Arg / CABA Meetup #5 - go-carbon
Golang Arg / CABA Meetup #5 - go-carbonGolang Arg / CABA Meetup #5 - go-carbon
Golang Arg / CABA Meetup #5 - go-carbonEzequiel Maraschio
 
Antipatrones en la ingeniería de software
Antipatrones en la ingeniería de softwareAntipatrones en la ingeniería de software
Antipatrones en la ingeniería de softwareEzequiel Maraschio
 

Más de Ezequiel Maraschio (9)

Fullstack conf 2017 - Basic dev pipeline end-to-end
Fullstack conf 2017 - Basic dev pipeline end-to-endFullstack conf 2017 - Basic dev pipeline end-to-end
Fullstack conf 2017 - Basic dev pipeline end-to-end
 
Hablemos de productividad
Hablemos de productividadHablemos de productividad
Hablemos de productividad
 
#Sysarmy meetup 2.1 // to-do lists - arma de doble filo
#Sysarmy meetup 2.1 // to-do lists - arma de doble filo#Sysarmy meetup 2.1 // to-do lists - arma de doble filo
#Sysarmy meetup 2.1 // to-do lists - arma de doble filo
 
Golang Arg / CABA Meetup #5 - go-carbon
Golang Arg / CABA Meetup #5 - go-carbonGolang Arg / CABA Meetup #5 - go-carbon
Golang Arg / CABA Meetup #5 - go-carbon
 
Antipatrones en la ingeniería de software
Antipatrones en la ingeniería de softwareAntipatrones en la ingeniería de software
Antipatrones en la ingeniería de software
 
Pasan cosas, cosas pasan
Pasan cosas, cosas pasanPasan cosas, cosas pasan
Pasan cosas, cosas pasan
 
Scrum inception
Scrum inceptionScrum inception
Scrum inception
 
Web Development introduction
Web Development introductionWeb Development introduction
Web Development introduction
 
Go lang - What is that thing?
Go lang - What is that thing?Go lang - What is that thing?
Go lang - What is that thing?
 

Último

Fe_C_Tratamientos termicos_uap _3_.ppt
Fe_C_Tratamientos termicos_uap   _3_.pptFe_C_Tratamientos termicos_uap   _3_.ppt
Fe_C_Tratamientos termicos_uap _3_.pptVitobailon
 
Reporte de simulación de flujo del agua en un volumen de control MNVA.pdf
Reporte de simulación de flujo del agua en un volumen de control MNVA.pdfReporte de simulación de flujo del agua en un volumen de control MNVA.pdf
Reporte de simulación de flujo del agua en un volumen de control MNVA.pdfMikkaelNicolae
 
SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.
SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.
SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.ariannytrading
 
183045401-Terminal-Terrestre-de-Trujillo.pdf
183045401-Terminal-Terrestre-de-Trujillo.pdf183045401-Terminal-Terrestre-de-Trujillo.pdf
183045401-Terminal-Terrestre-de-Trujillo.pdfEdwinAlexanderSnchez2
 
Presentación Proyecto Trabajo Creativa Profesional Azul.pdf
Presentación Proyecto Trabajo Creativa Profesional Azul.pdfPresentación Proyecto Trabajo Creativa Profesional Azul.pdf
Presentación Proyecto Trabajo Creativa Profesional Azul.pdfMirthaFernandez12
 
CAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdf
CAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdfCAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdf
CAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdfReneBellido1
 
AMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptx
AMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptxAMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptx
AMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptxLuisvila35
 
Una estrategia de seguridad en la nube alineada al NIST
Una estrategia de seguridad en la nube alineada al NISTUna estrategia de seguridad en la nube alineada al NIST
Una estrategia de seguridad en la nube alineada al NISTFundación YOD YOD
 
IPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESA
IPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESAIPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESA
IPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESAJAMESDIAZ55
 
Introducción a los sistemas neumaticos.ppt
Introducción a los sistemas neumaticos.pptIntroducción a los sistemas neumaticos.ppt
Introducción a los sistemas neumaticos.pptEduardoCorado
 
sistema de construcción Drywall semana 7
sistema de construcción Drywall semana 7sistema de construcción Drywall semana 7
sistema de construcción Drywall semana 7luisanthonycarrascos
 
Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023
Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023
Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023ANDECE
 
CICLO DE DEMING que se encarga en como mejorar una empresa
CICLO DE DEMING que se encarga en como mejorar una empresaCICLO DE DEMING que se encarga en como mejorar una empresa
CICLO DE DEMING que se encarga en como mejorar una empresaSHERELYNSAMANTHAPALO1
 
Residente de obra y sus funciones que realiza .pdf
Residente de obra y sus funciones que realiza  .pdfResidente de obra y sus funciones que realiza  .pdf
Residente de obra y sus funciones que realiza .pdfevin1703e
 
Flujo multifásico en tuberias de ex.pptx
Flujo multifásico en tuberias de ex.pptxFlujo multifásico en tuberias de ex.pptx
Flujo multifásico en tuberias de ex.pptxEduardoSnchezHernnde5
 
Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...
Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...
Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...SuannNeyraChongShing
 
CENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdf
CENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdfCENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdf
CENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdfpaola110264
 
Manual_Identificación_Geoformas_140627.pdf
Manual_Identificación_Geoformas_140627.pdfManual_Identificación_Geoformas_140627.pdf
Manual_Identificación_Geoformas_140627.pdfedsonzav8
 
Calavera calculo de estructuras de cimentacion.pdf
Calavera calculo de estructuras de cimentacion.pdfCalavera calculo de estructuras de cimentacion.pdf
Calavera calculo de estructuras de cimentacion.pdfyoseka196
 

Último (20)

Fe_C_Tratamientos termicos_uap _3_.ppt
Fe_C_Tratamientos termicos_uap   _3_.pptFe_C_Tratamientos termicos_uap   _3_.ppt
Fe_C_Tratamientos termicos_uap _3_.ppt
 
Reporte de simulación de flujo del agua en un volumen de control MNVA.pdf
Reporte de simulación de flujo del agua en un volumen de control MNVA.pdfReporte de simulación de flujo del agua en un volumen de control MNVA.pdf
Reporte de simulación de flujo del agua en un volumen de control MNVA.pdf
 
SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.
SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.
SOLICITUD-PARA-LOS-EGRESADOS-UNEFA-2022.
 
183045401-Terminal-Terrestre-de-Trujillo.pdf
183045401-Terminal-Terrestre-de-Trujillo.pdf183045401-Terminal-Terrestre-de-Trujillo.pdf
183045401-Terminal-Terrestre-de-Trujillo.pdf
 
Presentación Proyecto Trabajo Creativa Profesional Azul.pdf
Presentación Proyecto Trabajo Creativa Profesional Azul.pdfPresentación Proyecto Trabajo Creativa Profesional Azul.pdf
Presentación Proyecto Trabajo Creativa Profesional Azul.pdf
 
VALORIZACION Y LIQUIDACION MIGUEL SALINAS.pdf
VALORIZACION Y LIQUIDACION MIGUEL SALINAS.pdfVALORIZACION Y LIQUIDACION MIGUEL SALINAS.pdf
VALORIZACION Y LIQUIDACION MIGUEL SALINAS.pdf
 
CAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdf
CAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdfCAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdf
CAP4-TEORIA EVALUACION DE CAUDALES - HIDROGRAMAS.pdf
 
AMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptx
AMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptxAMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptx
AMBIENTES SEDIMENTARIOS GEOLOGIA TIPOS .pptx
 
Una estrategia de seguridad en la nube alineada al NIST
Una estrategia de seguridad en la nube alineada al NISTUna estrategia de seguridad en la nube alineada al NIST
Una estrategia de seguridad en la nube alineada al NIST
 
IPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESA
IPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESAIPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESA
IPERC Y ATS - SEGURIDAD INDUSTRIAL PARA TODA EMPRESA
 
Introducción a los sistemas neumaticos.ppt
Introducción a los sistemas neumaticos.pptIntroducción a los sistemas neumaticos.ppt
Introducción a los sistemas neumaticos.ppt
 
sistema de construcción Drywall semana 7
sistema de construcción Drywall semana 7sistema de construcción Drywall semana 7
sistema de construcción Drywall semana 7
 
Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023
Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023
Centro Integral del Transporte de Metro de Madrid (CIT). Premio COAM 2023
 
CICLO DE DEMING que se encarga en como mejorar una empresa
CICLO DE DEMING que se encarga en como mejorar una empresaCICLO DE DEMING que se encarga en como mejorar una empresa
CICLO DE DEMING que se encarga en como mejorar una empresa
 
Residente de obra y sus funciones que realiza .pdf
Residente de obra y sus funciones que realiza  .pdfResidente de obra y sus funciones que realiza  .pdf
Residente de obra y sus funciones que realiza .pdf
 
Flujo multifásico en tuberias de ex.pptx
Flujo multifásico en tuberias de ex.pptxFlujo multifásico en tuberias de ex.pptx
Flujo multifásico en tuberias de ex.pptx
 
Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...
Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...
Polimeros.LAS REACCIONES DE POLIMERIZACION QUE ES COMO EN QUIMICA LLAMAMOS A ...
 
CENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdf
CENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdfCENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdf
CENTROIDES Y MOMENTOS DE INERCIA DE AREAS PLANAS.pdf
 
Manual_Identificación_Geoformas_140627.pdf
Manual_Identificación_Geoformas_140627.pdfManual_Identificación_Geoformas_140627.pdf
Manual_Identificación_Geoformas_140627.pdf
 
Calavera calculo de estructuras de cimentacion.pdf
Calavera calculo de estructuras de cimentacion.pdfCalavera calculo de estructuras de cimentacion.pdf
Calavera calculo de estructuras de cimentacion.pdf
 

Entendiendo a nuestro navegador web