What exactly did the event loop do __javascript

Recorded from video What the heck is the event loop anyway? –philip Roberts

JS is a single-threaded language, with only one call stack, at the same time can only do one thing.

One thread = = One Call stack = = one thing at a time

When calling a function, we push the execution context of the function to the call stack and pop it out when the function is finished.

Although JS is a time one thing at runtime, the browser provides other things besides the JS engine, such as some APIs, which are some other threads that can be invoked. such as the processing of timer, Ajax and other interfaces.

When we use SetTimeout, the corresponding Webapi is timed and the callback function is pushed to the task queue after the timer is completed.

What the event loop does is observe stack and task queues.
When the stack is empty, the first item in the task queue is pulled out and pushed into the stack.

So this usage, like settimeout (func,0), is to postpone the execution of Func. Although settimeout (func,0) allows Func to be added to the task queue immediately, the event loop waits until the stack is empty to fetch func into the stack in the task queue and execute it.

All of those webapi are working the same way, such as AJAX requests, event handling.

We always say that UI rendering and JS execution is a thread, what is the meaning of it.
In contrast to the task queue, there is also a render queue for the render queue, which is the render queue. As with task queues, the render queue is called by the event loop only when the stack is empty, and the render queue has a higher priority than the task queue.
As we know, the General browser render for a period of 16.6ms. That is, the render task appears in the 16.6ms rendering queue, and when the stack is not empty, the render task is blocked. When the stack is empty, if a render,event loop is needed in the current render queue, the push into the stack is removed, and if the current is exactly the render gap, the event loop may fetch the task in the task queue to execute in the stack. Event Loop Specification

There is an event loops section in the HTML5 specification (read more obscure, focusing only on the relevant part). Each browser environment has at most one event loop. An event loop can have 1 or more task queue. A task queue is a list of ordered tasks that are used to do the following: Events task,parsing task, callbacks task, Using A resource task, reacting to DOM Manipulati On task. Macrotack and Microtask.

The task mentioned above is Macrotask,
And Microtask is called a job in the ES2015 specification.

Macrotask script settimeout setinterval setimmediate I/O

And Microtask includes: Process.nexttick promise Object.observe

In fact, Microtask is equivalent to a queue-jumping operation, unlike Macrotask, which is added to the task queue each time, will be executed at the next tick, Microtask will be executed before the next tick.
So for the following code:

Promise.resolve. Then (Console.log (1));
settimeout (function () {Console.log (2)},0)

The final result is 1, 2. Because promise's then will run before the next tick, settimeout will be executed only if the current stack is empty, that is, the next tick will execute, so the final output is 1, 2.

Another explanation is that the browser executes a macrotask first, then takes out all the tasks in the Microtask and executes them sequentially, then the Macrotask task, and so on.