Basics

• at a basic level, Event loop is a cycle which checks if we have any pending tasks:

  

Triggers which can put a task into the Event Loop

• <script>-tag;
• postponed tasks: setTimeout, setInterval, requestIdleCallback;
• event handlers from Browser API (click, mousedown, input, blur etc). They could be:
  • user-initiated;
  • from our code (fetch promise resolve);
• promises state changes;
• observers;
• RAF;

Rendering

• also browser has tasks for rendering DOM:
  • reads data of DOM-elements (size, attrs, position);
  • inserting/deleting nodes;
  • mutating attributes (style and others);
• render queue - rendering is not a single operation: there are multiple tasks in their own queue;

👉 JS and rendering are executed into a same thread, one by one

Screen Updating

• Event Loop is tighly tied to frames: it executes both JS code and page rendering;
• smooth updating is for 60 frames/second (16.7ms per frame);

Macro Task Queue and Micro Task Queue