This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge August More Text Challenge

background

Let’s get straight to the point: we are sure to be asked about event cycle in the process of front-end interview. We all understand event cycle, but this abstract concept, we always feel that we can’t say it well, say it is not straightforward enough, failed to let the interviewer get our point

That’s how it works (hahaha 🤣)

So make up your mind today to conclude: how can you make a good event loop in 5 minutes

Let’s go over some basic concepts first

The basic concept

First of all, we need to understand the event loop, we need to understand how javaScript works, there are many authors on the dig in detail, we will briefly talk about today

JavaScript is single threaded

JavaScript is a language that was created for guIs, for our web pages, to provide users with some basic operations, and it’s designed to be single-threaded for most of these reasons. A single-threaded design is relatively efficient in this type of scenario.

So why is it more efficient to make it single threaded?

We use proof by contradiction

  • We know that DOM rendering is a synchronous task, so DOM rendering blocks a single thread, but it also ensures that the page is rendered smoothly
  • Assuming that javascript is designed to be multi-threaded at this time, the DOM rendering task is divided into several small tasks and put into multiple threads, and the multiple threads are not only the DOM rendering task, there are other tasks queuing, then the final interface rendering effect will exist card by card effect

Synchronous and asynchronous tasks

The synchronization task is easy to understand, so let’s just write it

console.log('What time is it! Do you do? Tea first. ')
Copy the code

This is a synchronization task

So why do asynchronous tasks exist?

In a real world scenario, our interface would not return data immediately, or we would expect some code to execute after a certain amount of time

setTimeout(function(){
    console.log('Do baa do! Old pinbean's gonna miss you. ')},60)
Copy the code

The timer above is a typical asynchronous task

Execution stack and task queue

Execution stack: Where tasks are executed

Task queue: A place where asynchronous tasks are stored

Work: in a period of time, the synchronization task is executed on the execution stack at the beginning. After the synchronization task is executed, the execution stack will check whether there are asynchronous tasks in the task queue. If yes, take it out for execution

The mechanism for repeating the above tasks, continuously processing subsequent tasks, is called an event loop

Asynchronous tasks are divided into macro tasks and micro tasks

  • The macro task is executed at the start of the next event loop
  • The microtask is executed at the end of the current event loop

(Borrow a picture, invade delete)

conclusion

Back to the title of this article: How to explain the “event Cycle” to an interviewer in 5 minutes?

The following is a summary of the reference answer

  1. Js working mechanism is single threaded, but there are synchronous tasks and asynchronous tasks
  2. The place where tasks are executed is called the execution stack, and asynchronous tasks are queued to be executed
  3. After the tasks in the execution stack are completed, the execution stack will check whether there are any unexecuted tasks in the task queue. If there is, it will be carried out; If not, start the next work
  4. The mechanism by which the work of the third point is repeated and the subsequent tasks are continuously processed is the event loop

With these four points mentioned above, you have a general description of how the event loop works

The interviewer may also include questions such as:

  • Why is JS single threaded? Why do asynchronous tasks exist?
  • What’s the difference between a macro task and a microtask?
  • Write the output of a question on the execution order of synchronous and asynchronous tasks

So in the interview, or need us to macro task and micro task targeted training, can do practice and understanding, that is the best

The last

The space of the article is limited plus the technical level of the building master is limited, the wrong place hopes everybody positive message points out 😊

Good study will not be poor, I am your 970😎

Your likes are the motivation for my progress. Let’s make progress together!

The resources

Concurrency model and event loop – JavaScript | MDN

The Event Loop is an Event Loop

Deep: micro tasks and Javascript runtime environment – | MDN Web API interface reference

[Interview question: What is the event cycle?](juejin.cn/post/684490… “Interview question: What is the event cycle? “)