This is the 9th day of my participation in Gwen Challenge

As we all know, JavaScript is a single-threaded language by its very nature. This feature ensures that it handles user interaction, DOM manipulation, and so on. But at the same time, it also has the ability of multi-task alternating processing, which is realized through Event Loop.

Just thought of an appropriate analogy, is to go to the hospital.

There is only one doctor and only one patient at a time. (Single thread)

Patients have to wait in line for the doctor to call. (Execution stack, slightly inconsistent here is the example belongs to the queue, but does not affect)

Run into common patient, the doctor ask a diagnosis to finish solved. (Synchronization tasks are executed directly.)

When you encounter a patient who needs to be examined, the doctor will first make out a list for the examination and then tell you to come back to see him again. (An asynchronous task is assigned to a separate thread to process, and then a callback is executed.)

After the examination, the patient comes back to the doctor and stands in another line, waiting for the doctor to see them after the initial line. (Check the task queue when the stack is empty)

There were two lines for follow-up visits: one who said he would “come right back” after the exam, and the second who said he would wait an hour after the exam. (Micro and macro tasks)

The doctor today after the registration team are finished, the first “immediately to wait” team one by one to see, and then to see “over a period of time to wait” team there is no one, someone will call a come in, the middle once “immediately to wait” team to the new, will arrange the priority to come in to see.

Now to understand the following concepts:

Execution context stack and Task Queue

By this standard, tasks in JavaScript are divided into synchronous and asynchronous:

  • Synchronous tasks: Tasks queued on the main thread are executed one by one, forming an execution stack.
  • Asynchronous task: A task that does not enter the main thread but enters the queue. When an asynchronous task has a running result, an event is placed in the task queue. Once all synchronous tasks in the execution stack are completed, the system reads the tasks in the task queue and starts to execute.

Macro and micro tasks

Task queues are divided into two types: macro tasks and micro tasks. The following events are macro tasks:

SetInterval () setTimeout() The following events are microtasks

new Promise() new MutaionObserver()

  • Macro Tasks: Script, setTimeout, setInterval, setImmediate, I/O, UI Rendering

  • Micro Tasks: Process. nextTick, Promise.then, Object.observer, MutationObserver

Circulation mechanism

The main thread repeats this process over and over again, called an Event Loop.

In the event loop, take the task execution step from the task queue:

  1. Take a macro task to execute, execute the next step;

  2. Take a micro-task to execute, and then take another micro-task to execute until the micro-task is executed, then proceed to the next step;

  3. Update the UI.

The above three steps will be repeated.