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

Entendiendo a nuestro navegador web