JavaScript event loop (including macro tasks and micro tasks)
JavaScript features
JavaScript is a single-threaded non-blocking language. Single thread means: When JavaScript code is executed, there is only one main thread to handle all tasks, that is, only one thing can be done at the same time. Non-blocking means: when an asynchronous task is executed, the main thread will suspend the current asynchronous task, and then follow certain rules to execute the corresponding callback when the asynchronous task returns the result.
Thinking: Why is JavaScript designed to be single-threaded?
Single thread is necessary, and it is also the cornerstone of the Javascript language. One of the reasons is that in its original and most important execution environment-the browser, we need to perform various DOM operations. Imagine if Javascript is multi-threaded, then when two threads perform an operation on the DOM at the same time, for example, one adds an event to it, and the other deletes the DOM, how to deal with it? Therefore, in order to ensure that the situation similar to this example does not occur, Javascript chooses to use only one main thread to execute the code, which ensures the consistency of program execution.
Event Loop
How does JavaScript achieve non-blocking? Yes, it is achieved through the event loop. The event loop is coordinated through the task queue mechanism.
In the event loop, each cycle operation is called a tick, and the task processing of each tick is more complicated. The main steps are as follows:
In this tick, select the task that enters the queue first, and execute it once if there is one;
check whether there is a micro-task, and execute it if there is any, until the Microtask Queue is cleared; the
render is updated; the
main thread repeats the above steps.
What tick needs to know is:
JS tasks are divided into synchronous tasks and asynchronous tasks;
Synchronous tasks are executed on the main thread to form an execution stack;
outside the main thread, the event-triggered thread manages a task queue. As long as the asynchronous task has a result, an event
is placed in the task queue. Once all the synchronous tasks in the stack are executed After the execution is completed (after the JS engine is idle), it will read the task queue, add the runnable asynchronous task to the executable stack, and start execution.
Tasks include synchronous tasks and asynchronous tasks, and asynchronous tasks are divided into macro-tasks and micro-tasks
Macro-task
can be understood as: each execution of the stack code is a macro task (including each time an event callback is obtained from the event queue and placed in execution).
In order to enable the JS internal macro-task and DOM tasks to be executed in an orderly manner, the browser will re-render the page after the execution of the macro task ends and before the execution of the next macro task starts.
macro-task -> render -> macro-task -> …
Macro tasks include:
setInterval
setTimeout
setImmediate (node.js)
XHR callback
Event callback (mouse and keyboard events)
indexedDB database and other I/O operations
UI rendering
Micro-task
can be understood as a task that is executed immediately after the execution of the current task is completed. (Before the next task, before rendering).
macro-task -> micro-task -> render -> macro-task -> …
Micro tasks include:
Promise.then catch finally
process.nextTick (node.js)
MutationObserver
Object.observe (deprecated)
Operating mechanism
Execute a macro task (get it from the event list if it is not in the execution stack)
. If a micro task is encountered during execution, it will be added to the task queue of the micro task;
after the macro task is executed , it will be executed immediately in the current micro task queue After all the microtasks (executed in sequence) of the
current macro task are executed, the rendering is checked, and then the GUI thread takes over the rendering (but UI render may not be executed because the performance consumed by the UI rendering needs to be considered whether there are UI changes)
after the rendering is completed , JS thread continues to take over and starts the next macro task (obtained from the event queue)
JS keeps repeating the above steps until all tasks are executed. (Stack memory overflow will also terminate execution)
