SlideShare a Scribd company logo
1 of 52
Download to read offline
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

More Related Content

What's hot

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
 

What's hot (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 to 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 to 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
 

More from 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
 

More from 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?
 

Recently uploaded

FOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURAL
FOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURALFOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURAL
FOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURALRiveraPemintelAlejan
 
GeoS33333333333333333333333333333333.pdf
GeoS33333333333333333333333333333333.pdfGeoS33333333333333333333333333333333.pdf
GeoS33333333333333333333333333333333.pdffredyflores58
 
U1-1_UPC_ Algoritmos Conceptos Básicos.pdf
U1-1_UPC_ Algoritmos Conceptos Básicos.pdfU1-1_UPC_ Algoritmos Conceptos Básicos.pdf
U1-1_UPC_ Algoritmos Conceptos Básicos.pdfEberCV1
 
METASISTEMA-EXPOSICIONfgertertertretr.ppt
METASISTEMA-EXPOSICIONfgertertertretr.pptMETASISTEMA-EXPOSICIONfgertertertretr.ppt
METASISTEMA-EXPOSICIONfgertertertretr.pptSANTOS400018
 
La Evolución Industrial en el Ecuador.pdf
La Evolución Industrial en el Ecuador.pdfLa Evolución Industrial en el Ecuador.pdf
La Evolución Industrial en el Ecuador.pdfAnthony Gualpa
 
Unidad_1_Parte_1 organización y estructura de los seres vivos
Unidad_1_Parte_1 organización y estructura de los seres vivosUnidad_1_Parte_1 organización y estructura de los seres vivos
Unidad_1_Parte_1 organización y estructura de los seres vivossolareslionel9
 
PRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdf
PRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdfPRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdf
PRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdfAuraGabriela2
 
exposicion cereales, todo sobre la avena
exposicion cereales, todo sobre la avenaexposicion cereales, todo sobre la avena
exposicion cereales, todo sobre la avenaYuliethRamrezCruz
 
Trabajos en Altura - USO DEL ARNES .ppt
Trabajos en Altura  - USO DEL ARNES .pptTrabajos en Altura  - USO DEL ARNES .ppt
Trabajos en Altura - USO DEL ARNES .pptdantechaveztarazona
 
Wal-Mart batalla con RFID...............
Wal-Mart batalla con RFID...............Wal-Mart batalla con RFID...............
Wal-Mart batalla con RFID...............osoriosantiago887
 
Sistema Operativo Windows Capas Estructura
Sistema Operativo Windows Capas EstructuraSistema Operativo Windows Capas Estructura
Sistema Operativo Windows Capas EstructuraJairoMaxKevinMartine
 
Guía para la identificación de materiales peligrosos
Guía para la identificación de materiales peligrososGuía para la identificación de materiales peligrosos
Guía para la identificación de materiales peligrososAdrianVarela22
 
SEMICONDUCTORES lafhnoealifsncknisz.pptx
SEMICONDUCTORES lafhnoealifsncknisz.pptxSEMICONDUCTORES lafhnoealifsncknisz.pptx
SEMICONDUCTORES lafhnoealifsncknisz.pptxOSCARADRIANMEDINADUR
 
Transporte y Manipulación de Explosivos - SUCAMEC
Transporte y Manipulación de Explosivos - SUCAMECTransporte y Manipulación de Explosivos - SUCAMEC
Transporte y Manipulación de Explosivos - SUCAMECamador030809
 
Parciales y Semestral Profesor David cedeño
Parciales y Semestral Profesor David cedeñoParciales y Semestral Profesor David cedeño
Parciales y Semestral Profesor David cedeñomonicabetancur29
 
Sales binarias y oxisales química inorganica
Sales binarias y oxisales química inorganicaSales binarias y oxisales química inorganica
Sales binarias y oxisales química inorganicakiaranoemi
 
EJERCICIOS DE -LEY-DE-OHM aplicaciones prácticas
EJERCICIOS DE -LEY-DE-OHM aplicaciones prácticasEJERCICIOS DE -LEY-DE-OHM aplicaciones prácticas
EJERCICIOS DE -LEY-DE-OHM aplicaciones prácticasEfrain Yungan
 
Analisis de reparación de fisuras superficiales en pavimentos.pptx
Analisis de reparación de fisuras superficiales en pavimentos.pptxAnalisis de reparación de fisuras superficiales en pavimentos.pptx
Analisis de reparación de fisuras superficiales en pavimentos.pptxasotomayorm2
 
Análisis de Varianza- Anova y pruebas de estadística
Análisis de Varianza- Anova y pruebas de estadísticaAnálisis de Varianza- Anova y pruebas de estadística
Análisis de Varianza- Anova y pruebas de estadísticaJoellyAlejandraRodrg
 
PLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdf
PLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdfPLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdf
PLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdfmcamposa87
 

Recently uploaded (20)

FOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURAL
FOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURALFOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURAL
FOLIACIONES Y LINEACIONES GEOLOGÍA ESTRUCTURAL
 
GeoS33333333333333333333333333333333.pdf
GeoS33333333333333333333333333333333.pdfGeoS33333333333333333333333333333333.pdf
GeoS33333333333333333333333333333333.pdf
 
U1-1_UPC_ Algoritmos Conceptos Básicos.pdf
U1-1_UPC_ Algoritmos Conceptos Básicos.pdfU1-1_UPC_ Algoritmos Conceptos Básicos.pdf
U1-1_UPC_ Algoritmos Conceptos Básicos.pdf
 
METASISTEMA-EXPOSICIONfgertertertretr.ppt
METASISTEMA-EXPOSICIONfgertertertretr.pptMETASISTEMA-EXPOSICIONfgertertertretr.ppt
METASISTEMA-EXPOSICIONfgertertertretr.ppt
 
La Evolución Industrial en el Ecuador.pdf
La Evolución Industrial en el Ecuador.pdfLa Evolución Industrial en el Ecuador.pdf
La Evolución Industrial en el Ecuador.pdf
 
Unidad_1_Parte_1 organización y estructura de los seres vivos
Unidad_1_Parte_1 organización y estructura de los seres vivosUnidad_1_Parte_1 organización y estructura de los seres vivos
Unidad_1_Parte_1 organización y estructura de los seres vivos
 
PRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdf
PRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdfPRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdf
PRIMER Y SEGUNDO TEOREMA DE CASTIGLIANO.pdf
 
exposicion cereales, todo sobre la avena
exposicion cereales, todo sobre la avenaexposicion cereales, todo sobre la avena
exposicion cereales, todo sobre la avena
 
Trabajos en Altura - USO DEL ARNES .ppt
Trabajos en Altura  - USO DEL ARNES .pptTrabajos en Altura  - USO DEL ARNES .ppt
Trabajos en Altura - USO DEL ARNES .ppt
 
Wal-Mart batalla con RFID...............
Wal-Mart batalla con RFID...............Wal-Mart batalla con RFID...............
Wal-Mart batalla con RFID...............
 
Sistema Operativo Windows Capas Estructura
Sistema Operativo Windows Capas EstructuraSistema Operativo Windows Capas Estructura
Sistema Operativo Windows Capas Estructura
 
Guía para la identificación de materiales peligrosos
Guía para la identificación de materiales peligrososGuía para la identificación de materiales peligrosos
Guía para la identificación de materiales peligrosos
 
SEMICONDUCTORES lafhnoealifsncknisz.pptx
SEMICONDUCTORES lafhnoealifsncknisz.pptxSEMICONDUCTORES lafhnoealifsncknisz.pptx
SEMICONDUCTORES lafhnoealifsncknisz.pptx
 
Transporte y Manipulación de Explosivos - SUCAMEC
Transporte y Manipulación de Explosivos - SUCAMECTransporte y Manipulación de Explosivos - SUCAMEC
Transporte y Manipulación de Explosivos - SUCAMEC
 
Parciales y Semestral Profesor David cedeño
Parciales y Semestral Profesor David cedeñoParciales y Semestral Profesor David cedeño
Parciales y Semestral Profesor David cedeño
 
Sales binarias y oxisales química inorganica
Sales binarias y oxisales química inorganicaSales binarias y oxisales química inorganica
Sales binarias y oxisales química inorganica
 
EJERCICIOS DE -LEY-DE-OHM aplicaciones prácticas
EJERCICIOS DE -LEY-DE-OHM aplicaciones prácticasEJERCICIOS DE -LEY-DE-OHM aplicaciones prácticas
EJERCICIOS DE -LEY-DE-OHM aplicaciones prácticas
 
Analisis de reparación de fisuras superficiales en pavimentos.pptx
Analisis de reparación de fisuras superficiales en pavimentos.pptxAnalisis de reparación de fisuras superficiales en pavimentos.pptx
Analisis de reparación de fisuras superficiales en pavimentos.pptx
 
Análisis de Varianza- Anova y pruebas de estadística
Análisis de Varianza- Anova y pruebas de estadísticaAnálisis de Varianza- Anova y pruebas de estadística
Análisis de Varianza- Anova y pruebas de estadística
 
PLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdf
PLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdfPLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdf
PLANTILLA DE PP PREVENCIONISTA DE RIESGOS LABORALES (1).pptx.pdf
 

Entendiendo a nuestro navegador web