Como funciona tu navegador web
•Descargar como PPTX, PDF•
0 recomendaciones•1,040 vistas
Historia, caracteristicas y flujo de como funciona un navegador web
Recomendados
Más contenido relacionado
Destacado
Similar a Como funciona tu navegador web
Similar a Como funciona tu navegador web (20)
Más de Ezequiel Maraschio
Más de Ezequiel Maraschio (9)
Como funciona tu navegador web
- 1. Cómo funciona tu navegador web Ezequiel Maraschio
- 2. ¿Por qué es importante saber cómo funciona un navegador web?
- 5. 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...
- 6. 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
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. 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
- 12. Networking
- 13. Networking -> DNS Lookup http://www.hill2dot0.com/wiki/index.php?title=DNS
- 15. Rendering engine ¿Qué habíamos dicho que era?
- 16. Existen varios... - Firefox -> Gecko - Chrome (iPhone) y Safari -> WebKit - IE -> Trident - Opera y Chrome -> Blink Rendering engine
- 18. <html> <body> <p> Nerdearla 2016 o/ </p> <div> <img src="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. Y ahora?!
- 24. ¿Preguntas?
Notas del editor
- - 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++
- Chrome: 56 Firefox: 14 IE: 12 Safari: 10 Opera: 2
- 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.
- Parsea / Interpreta el html y css para mostrar el contenido en la pantalla
- Hasta el chrome 27 usaba webkit
- 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
- 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
- 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
- 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
- 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