Como funciona tu navegador web
25
Cómo funciona tu navegador web Ezequiel Maraschio
Transcript of Como funciona tu navegador web
Cómo funciona tu navegador web
Ezequiel Maraschio
¿Por qué es importante saber cómo funciona un navegador
web?
Top Players
http://gs.statcounter.com/#browser-ww-monthly-201505-201604
Componentes
http://www.html5rocks.com/es/tutorials/internals/howbrowserswork/
Componente: User Interface
Expone los controles con los que el usuario interactúa con el browser engine…
Estos son:
- Navbar
- Bookmarks
- Botones varios (Refresh, back)
- Etcs...
Es el encargado de coordinar la interacción del usuario con el motor de rendering
Tareas:
- Expone los métodos para cargar una URL y para navegarla (ir para atrás, ir para adelante, refresh)
- Se encarga de las notificaciones con respecto a la carga de una URL hacia el usuario
- Notifica errores de capas siguientes a la UI
Componente: Browser Engine
Componente: Rendering engine
Es el componente principal para que un navegador muestre algo en pantalla
Tareas:
- Representar visualmente un documento
- Interpreta el HTML, XML, JS y CSS en lo que ve el usuario
- Corrige errores de markup
Es quien se encarga de los aspectos de comunicación y seguridad entre la URL que queremos acceder y el servidor donde se encuentra ese recurso
Tareas:
- Traducciones de caracteres
- Interpretación de los MIME
- Cache de red
Componente: Networking
Es el encargado de interpretar y ejecutar código JavaScript que se encuentra en las webs y enviar la salida al render engine
Puede ser deshabilitado por el usuario...
Componente: JS Interpreter
Es una capa de abstracción entre funcionalidad del sistema operativo y el navegador
También se encarga de dibujar widgets como dropdowns y popups
Componente: User Interface Backend
Se encarga de guardar la info que el navegador necesita
Es donde van a parar cosas como:
- Cookies
- Bookmarks
- Session
- Cache
- Preferencias del usuario
- Y desde html 5 -> se encarga de gestionar el Local Storage
Componente: Data Storage
Networking
Networking -> DNS Lookup
http://www.hill2dot0.com/wiki/index.php?title=DNS
¿Y luego?
https://docs.google.com/presentation/d/1ZRIQbUKw9Tf077odCh66OrrwRIVNLvI_nhLm2Gi__F0
Rendering engine
¿Qué habíamos dicho que era?
Existen varios...
- Firefox -> Gecko
- Chrome (iPhone) y Safari -> WebKit
- IE -> Trident
- Opera y Chrome -> Blink
Rendering engine
Rendering engine flow
<html> <body> <p> Nerdearla 2016 \o/ </p> <div> <img src="example.png"/> </div> </body></html>
Parse HTML -> Armando el DOM
Render tree -> Armar el árbol de rendering
Layout render tree -> Diagramar el árbol de rendering
Y ahora?!
¿Preguntas?
http://www.html5rocks.com/es/tutorials/internals/howbrowserswork/
http://arvindr21.github.io/howBrowserWorks/
http://www.slideshare.net/quangntta/web-browser-architecture-49196378
http://gs.statcounter.com/
https://vimeo.com/44182484
https://docs.google.com/presentation/d/1ZRIQbUKw9Tf077odCh66OrrwRIVNLvI_nhLm2Gi__F0
Fuentes
