Event loop in browser
Download as PPTX, PDF1 like256 views
The document provides an overview of the browser's internal structure, including the user interface, browser engine, and rendering engine. It explains the event loop's importance in JavaScript execution and how it interacts with various queues and tasks. Additionally, it outlines the workflow of how HTML is rendered and processed by the browser.
Event loop in browser
- 1. Event Loop In Browser Anupam Poria https://www.linkedin.com/in/anupam-poria-5b9ab957/ Event Loop
- 2. ● How HTML is rendered in the browser? ● What is the event loop? ● Why it's important? ● How does it work? Agenda
- 3. Internal structure of the browser User Interface Browser Engine Rendering Engine Storage networking JS engine UI backend User interface: The user interface includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page. Browser engine: The browser engine marshals actions between the UI and the rendering engine. Rendering engine: The rendering engine is responsible for displaying the requested content. Data storage: The data storage is a persistence layer (cookies, localStorage, IndexedDB, WebSQL, and FileSystem). UI backend: It'd used for drawing basic widgets. This backend exposes a generic interface. Underneath it uses operating system user interface methods.
- 4. Browser Workflow Byte Character Tokens Nodes Dom 3c626f64793e3c6469763e48656c6c6f3c2f6469763e3c2f62 6f64793e <body><div>Hello</div></body><body><div>Hello</div></body> StartTag:body StartTag:div Hello EndTag:div EndTag:body Tokenize r Body Hello Div body div Hello TreeBuilder
- 5. Call Stack function getBar() { console.log('done') setTimeout(() => { console.log('Wao!') },1000); } function getFoo() { getBar(); } getFoo(); getFoo() function getFoo(){ getBar(); } function getBar() { console.log('done') } done Call Stack
- 7. Call Stack function getBar() { console.log('done') setTimeout(() => { console.log('Wao!') },1000); } function getFoo() { getBar(); } getFoo(); Done Wao!
- 8. Heap Event Loop setTimeout new Promise AJAX etc.. resolve() reject() callback() callback() callback() 60 frame/s One callback() Full job queue() May be re render ……... callstack V8 runtime code code code Web APIs Job queue Event queue Render queue Main Thread
- 9. Event loop pseudo code while (true) { queue = getNextQueue(); task = queue.pop(); process(task); while (microTasksQueue.hasTasks()) { processMicroTask(); } if (isRepaintTime()) { doPaint(); } }
- 10. Thank You