como funciona tu navegador web
TRANSCRIPT
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