The premise

  1. Js runs in a single thread
  2. Asynchrony is implemented based on callbacks
  3. The Event loop is how asynchronous callbacks are implemented

The event loop process

  1. Synchronize the code line by line in the Call Stack
  2. When encountering asynchronous code, record it and wait for the opportunity (timing, network request)
  3. Time is up, move to the CallBack Queue
  4. If the Call Stack is empty, the Event Loop starts working
  5. The CallBack Queue is queried and moved to the Call Stack if any exists
  6. And then we continue our search

DOM events and Event loops

  1. Js is single threaded
  2. Asynchronous (setTimeout, Ajax) uses callbacks, based on event loops
  3. DOM events also use callbacks, based on event loops

Macro and micro tasks

MacroTask microTask

Macro tasks: setTimeout, setInterval, Ajax, DOM event microtasks: Promise, async/await microtasks are executed earlier than macro tasks

All asynchronous front-end (macro/micro)

Event loop and DOM rendering

Review, Event loop

  1. Js is single threaded and shares a thread with DOM rendering
  2. When js is executed, leave some time for DOM rendering

Call Stack idle (synchronous code completed) == “DOM render attempt ==” trigger Event loop

The difference between microtasks and macro tasks

  • Macro task: triggered after DOM rendering, as specified by setTimeout browser
  • Microtasks: Trigger before DOM rendering, as promised in ES6

Describes the Event loop mechanism