Descargar para leer sin conexión
Subido porEzequiel Maraschio
Como funciona tu navegador web
Un navegador web está compuesto de varios componentes principales: la interfaz de usuario, el motor del navegador, el motor de renderizado y el intérprete de JavaScript. La interfaz de usuario maneja la interacción del usuario, el motor del navegador coordina los componentes, el motor de renderizado convierte el código HTML, CSS y JavaScript en una página visible, y el intérprete de JavaScript ejecuta el código JavaScript. Juntos, estos componentes permiten que los usuarios vean y naveguen páginas web.
Como funciona tu navegador web
- 1. Cómo funciona tu navegadorweb Ezequiel Maraschio
- 2. ¿Por qué esimportante saber cómo funciona un navegador web?
- 3.
- 4.
- 5. Componente: User Interface Exponelos controles con los que el usuario interactúa con el browser engine… Estos son: - Navbar - Bookmarks - Botones varios (Refresh, back) - Etcs...
- 6. Es el encargadode 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
- 7. Componente: Rendering engine Esel 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
- 8. Es quien seencarga 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
- 9. Es el encargadode 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
- 10. Es una capade 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
- 11. Se encarga deguardar 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
- 12.
- 13. Networking -> DNSLookup http://www.hill2dot0.com/wiki/index.php?title=DNS
- 14.
- 15. Rendering engine ¿Qué habíamosdicho que era?
- 16. Existen varios... - Firefox-> Gecko - Chrome (iPhone) y Safari -> WebKit - IE -> Trident - Opera y Chrome -> Blink Rendering engine
- 17.
- 18. <html> <body> <p> Nerdearla 2016 o/ </p> <div> <imgsrc="example.png"/> </div> </body> </html> Parse HTML -> Armando el DOM
- 19. Render tree ->Armar el árbol de rendering
- 20. Layout render tree-> Diagramar el árbol de rendering
- 21. Painting render tree-> Pintar el árbol
- 22.
- 23.
- 24.
- 25.
Notas del editor
- #3 - Es la app que más usamos - La gran mayoría de servicios están hechos para correr en el - Es una ventana al mundo :O - Si hacemos web, debemos saber cómo funciona nuestro anfitrión - C++
- #4 Chrome: 56 Firefox: 14 IE: 12 Safari: 10 Opera: 2
- #15 La tokenización es el análisis léxico y la conversión en tokens de los datos de entrada. Entre los tokens HTML se encuentran las etiquetas iniciales, las etiquetas finales y los valores de atributos. El tokenizador reconoce el token, lo envía al constructor del árbol y consume el siguiente carácter para reconocer el siguiente token y así sucesivamente hasta llegar al final de los datos.
- #16 Parsea / Interpreta el html y css para mostrar el contenido en la pantalla
- #17 Hasta el chrome 27 usaba webkit
- #19 Obtiene la data de la capa de networking DOM son las siglas de "Document Object Model" (modelo de objetos del documento). Es la presentación de objetos del documento HTML y la interfaz de los elementos HTML para el mundo exterior Autocompleta / cierra los tags en caso de ser necesario
- #20 Render tree: DOM + CSS Tener en cuenta que solo los objetos que se van a mostrar están en este árbol Resuelve los Styles -> Prioridades (User styles, inline, browser defaults) Arma un DOM con css ya procesado / parseado -> Muestra start en la pantalla del navegador
- #21 En este paso se calcula la posición (coordenadas) y el tamaño de cada nodo del DOM que va a aparecer A cada elemento del render tree se le dan coordinadas de la posición que debe tomar en la página. Es un proceso recursivo hasta recorrer todos los elementos del árbol
- #22 Se pinta cada nodo en base al estilo que tenga asociado en el render tree y la pagina cobra vida! Es un proceso recursivo hasta recorrer todos los elementos del árbol
- #23 WebGL: OpenGL 3D API for the web WebRTC: P2P communication Real time applications Parsers JS WebSockets Web Workers Web Components Performance improvements Tools for web developers WebTelephony API Project Maelstrom http://project-maelstrom.bittorrent.com/ WebSMS API Contacts API Camera API Battery API