Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Event loop in browser

76 vues

Publié le

In this presentation, Anupam Poria of Valuebound has talked about “Event loop in the browser.”
----------------------------------------------------------
Get Socialistic

Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Event loop in browser

  1. 1. Event Loop In Browser Anupam Poria https://www.linkedin.com/in/anupam-poria-5b9ab957/ Event Loop
  2. 2. ● How HTML is rendered in the browser? ● What is the event loop? ● Why it's important? ● How does it work? Agenda
  3. 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. 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. 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
  6. 6. Call Stack function getBar() { console.log('done') setTimeout(() => { console.log('Wao!') },1000); } function getFoo() { getBar(); } getFoo(); Done Wao!
  7. 7. 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
  8. 8. Event loop pseudo code while (true) { queue = getNextQueue(); task = queue.pop(); process(task); while (microTasksQueue.hasTasks()) { processMicroTask(); } if (isRepaintTime()) { doPaint(); } }
  9. 9. Thank You

×