preface

I haven’t updated my article in two weeks, so here’s an article about EventLoop. EventLoop is involved both in daily work and at the bottom of the framework library. So let’s take a look at the mysterious cycle of events and what it’s all about. The event loop looks pretty cool in nature, but once you understand some of its concepts. She is still very beautiful.

“

If there is any misunderstanding, please correct me. QAQ, let me update this lazy cat.

– – QAQ

Born in a single thread, call stack

As we all know, JavaScript is a single-threaded programming language. It has one and only one call stack. Do one thing at a time. Programs can only run one piece of code at a time.

“

Focus. Do one thing at a time.

– – QAQ

So let’s look at an example

function Foo1(a: number, b:number) :number {
  return a * b
}

function Foo2(n: number) :void {
 console.log(n) / / output n  const nSquare: number = Foo1(n, n)  console.log(nSquare) }  Foo2(4)  // Output the result 4= >16 Copy the code

So in this call stack, it might look something like this. Each call frame only does one thing. Then the call frames of a series of synchronous tasks are stacked in the call stack and each call frame needs to wait for the completion of the previous call frame before it is executed.


Blocking and asynchrony

What is blocking

“

When you go to the bathroom, it’s occupied. You keep waiting. Ten minutes per person should be a standard amount of time. But you did not expect the inside is a king touch fish, it just squat more than half an hour has not come out. Your face is the color of liver. This is called obstruction.

– – QAQ

Simply put, the last call frame took a very long time to execute. Then you can’t do anything else during that time. Can only wait… QAQ.

What is asynchrony

“

The same is you go to the toilet, but you may be long more tough, the front of a fish king afraid of you when the time to break the door single kill, so take the initiative to let me first, finished calling it to touch the fish.

– – QAQ

Asynchronous task is a solution of synchronous task running without affecting active current execution stack, which can effectively avoid the problem of task blocking.

Macro and micro tasks

Macro task

The microtasks of macro tasks are a very important part of the event cycle. In the browser, when we encounter a MacroTask event, we push its internal execution task to the MacroTask Queue. Common macro tasks include setTimeout, setInterval, and I/O stream operations.

Micro tasks

In the browser, when the call stack is executing a microtask, the internal execution of the microtask will be pushed to the MicroQueue and saved until the loop is cleared once. If new microtasks are encountered, they are added to the end of the queue and executed. Common microtasks include familiar Promise execution methods, such as then, catch, and so on. Then there is its brother Async, which is essentially a Promise, no difference, and some unpopular ones like MutationObserver will not be mentioned.

Event loop mechanism

Hand plot

The event loop is pretty straightforward once you understand how it runs. In the execution stack, the priority must be the big brother synchronous task. In this process, as described in the macro task and micro task chapter, the corresponding task will be stored in the corresponding queue, which should be very clear.

When all the code in the execution stack is finished, the microtasks in the MicroQueue are put into the execution stack one by one on a first-in, first-out basis, similar to the normal execution stack. Belonging to different tasks, microtasks are inserted to the end of the queue and executed sequentially, while macro tasks are inserted to the macro task queue and executed in the next event cycle.

When the task in the MicroQueue is finished, the next MacroQueue macro task is started. Then it’s a repetitive operation. Also known as EventLoop.

“

I don’t know if MY description is clear, to sum up: Run => return => Empty microtask => Run => Return => empty microtask, next macro task. Keep doing while(Message Queue)

– – QAQ

  • The initial call stack is also a Macro Macro task.
  • A call stack only performs one Macro Macro task, but can perform multiple Micro tasks whenMicro tasksAfter the queue is executed, the next macro task is executed.
  • Microtasks in execution tasks are disposed of in this loop, while macro tasks are not executed until the next execution stack.

conclusion

EventLoop is a very interesting topic and I hope you can learn something new from it. The article was originally sent wrong. I’m glad I had someone to talk to. Thank you very much. If there are any inaccuracies, please mention them. Give it a thumbs up if it helps.

Recommend secondary links:

2 minutes to know JavaScript Event Loop | interview necessary

Eventloop is not scary. It’s scary to meet a Promise

What you don’t know about EventLoop and browser rendering, frame animation, idle callbacks

This article is formatted using MDNICE