Why message queues and event loops?

As we all know, every time the browser opens a TAB (currently, every time it opens a different web page), a new rendering process starts. The render process is divided into the following threads:

  1. Main thread (i.e. JS engine thread)
  2. GUI rendering thread
  3. Event trigger thread
  4. Timer trigger thread
  5. Asynchronous HTTP request threads

The main thread handles the DOM as well as calculating styles and layouts, as well as js tasks and events. With so many tasks in the same thread, how do you get different tasks to execute methodically with different priorities? This requires a scheduling system to systematically plan the execution of these tasks, and this system is the message queue and event loop system.

Implement message queues and event loops from scratch

2.1 Version 1 – The same thread handles scheduled tasks

Let’s start with the simplest case. For example: Now you have to do an arithmetic problem that requires you to do it line by line to get the final result:

// Start thread 1. a = 5 + 10 2. b = 4 * 2 3. Output a + b // thread exitsCopy the code

Suppose each line is a task, and steps 1, 2, and 3 are the list of tasks that the main thread needs to perform. These tasks are pre-arranged, and you just do them line by line, and the result is 23.

This is the simplest version: the scheduling system executes tasks one by one in a predetermined order.

2.2 Version 2 – The same thread handles dynamically added tasks

The first version was too simple. In reality, it’s impossible to schedule all the tasks ahead of time. The simplest example is browser events, such as when a click event task is launched depending on when the user clicks the mouse. So, in the second version, we will discuss how to deal with tasks that are constantly being created during execution.

The simplest way to do this is to maintain a task list and, when the existing tasks are finished, loop through the list to check and execute new tasks.

So far, there’s been a little bit of an event loop.

2.3 Version 3 – Handles tasks generated by different threads

Now let’s move on to a more realistic scenario. So far, we’ve been talking about being in the same thread. However, in a formal browser run, a renderer process has multiple threads, and the main thread may need to handle tasks from multiple threads. For example, timer time to complete the task, such as the user clicks the mouse generated by the task.

In this case, how do you perform the task? Imagine a situation where you are tasked with sorting fruit into different boxes. However, all day long, different people come to deliver fruit to you. How will you be able to sort all the fruit? Another requirement: for those who come early, you need to sort their fruit first.

How do you do that?

The best way is to have an assembly line, and the people who come to deliver the fruit put the fruit on the assembly line. And when you’re sorting fruit, always check again and again to see if there’s any fruit on the line.

This pipeline is the message queue. As a data structure, the queue is first-in, first-out, which satisfies the requirement that “the first generated task is executed first”.

Other threads generate tasks and push on to the message queue. Once the main thread completes the current task, it goes to the message queue to fetch the first task and execute it successively. This is the message queue.

So far, we’ve talked a lot about message queues and event loops

< About us >

We are one front-end programmer monkey + one front-end programmer girl from the imperial capital.

The articles posted here are a summary of what we have learned and are expected to be updated at least once a week.

At present our learning plan is: small program actual combat => VUE advanced usage => VUE principle => CSS foundation => ES6 => JS in-depth

In addition, some of the technologies and functions used in the work will be summarized and updated here in time

If the article is wrong or not clear, welcome to leave a message feedback ~~

From beginning to realize the message queue and event loop | creator training camp The campaign is under way…