Upupming /frontend learning-map: Front-end Learning route (TODOs) (github.com)

  • Call Stack/Execution Context Stack: LIFO holds all Execution contexts during Execution
    • When a function is called, the context of the function is pushed onto the stack. After the value is executed, the stack will be clear. The remaining code in the upper context will be executed

Introduction of task queues and event loops

JS is single threaded, which has been reflected in many places. If you execute a long synchronization task (request data, timer, read file), the following execution statement will wait for the synchronization task, causing the page to stall.

Browser has Browser, Render, Plugin, GPU these several processes, Render process represents a Tab window, there is a main thread, need to deal with DOM, computing style, processing layout, processing JS tasks and various inputs. An overall scheduling system is needed to schedule these tasks.

  • Event loop: Receives and executes new tasks while the thread is running
  • Message (task) queue: Receives messages sent by other threads, FIFO

Asynchronous tasks waiting for an asynchronous function after the callback function, push the task queue, setTimeout, for example, is at the end of the time and will push the executive function into the task queue, when the main thread to empty, that is, all after the synchronization task, the interpreter will read the task queue, and asynchronous tasks will be completed in order to join in the call stack and executed.

JS engine threads are single threads, but browsers must utilize other threads to handle typical asynchronous tasks:

  • GUI rendering thread
  • HTTP asynchronous network request thread: processes user get, POST and other requests, and pushes the callback function to the task queue after the result is returned
  • Timing trigger threads: setInterval, setTimeout After the waiting time ends, the executing function is pushed to the task queue
  • Browser event processing thread: puts the callback functions to be executed after the UI interaction events such as Click and mouse into the event queue

Macro and micro task queues

  • Task Queue: Script, setTimeout, setInterval, IO, UI interaction events, postMessage, MessageChannel, setImmediate (Node.js)
  • Microtask Queue: Promise.then, Object.observe, MutationObserver, process.nexttick (node.js environment)

Event loop

Event Loop The system is responsible for listening to and executing tasks in the message queue, and scheduling the execution process of the task queue depends on the Event Loop.

  • Macro task queue
    • Execute macro tasks in the enqueue order and place them on the call stack
    • After all synchronization tasks under the macro task are executed, the call stack is cleared, and the microtask queue starts to execute all the microtasks in sequence according to the queue joining order
  • It then returns to the next macro task to begin the second event loop

The first macro task is usually code in a script tag.

If new microtasks are added to the microtask queue during the execution of microtasks, they need to be cleared together. The next macro task will not be executed until the microtask queue is empty.

Microtasks and macro tasks are bound, and each macro task creates its own microtask queue when it executes. The duration of a microtask affects the duration of the current macro task. For example, during the execution of a macro task, 100 microtasks are generated, and the execution time of each microtask is 10 milliseconds, then the execution time of 100 microtasks is 1000 milliseconds, or it can be said that the 100 microtasks increase the execution time of the macro task by 1000 milliseconds. So when you’re writing code, it’s important to control the duration of microtasks. In a macro task, create a macro task and a microtask for callbacks, and in either case, the microtask precedes the macro task.

Refer to the link

  1. Mp.weixin.qq.com/s/H9rbU_HNR…