Single-threaded JavaScript

As we all know, our JavaScript is a single-threaded language, which is defined by its purpose and use: as a browser scripting language, JavaScript’s primary purpose is to interact with users and manipulate the DOM. If JavaScript is not a single-threaded language, it is easy to create some conflicts. For example, if JavaScript has two threads at the same time, one is adding content to a DOM node, and the other is removing it, which thread should the browser use?

So, given that JavaScript is a single-threaded language, how does it do something asynchronous?

The answer is our topic today: JavaScript event loops. Before we talk about event loops, let’s talk about some basic knowledge so that you can connect the whole event loop more clearly and deeply.

The browser

While the JS engine is single-threaded, its host environment (browser or Node) is multi-threaded, meaning that there are other threads in the browser kernel that can be used to assist the JS engine threads.

Here are some of the browser threads that students can get a sense of:

  1. GUI rendering engine thread
  2. JS engine thread
  3. Timer trigger thread
  4. Browser event thread
  5. HTTP asynchronous thread
  6. .

JS engine thread

The JS engine thread, also known as the main thread, is used to run JS synchronized code, for example:

var a = 1          / / 1
console.log()     / / 2
setTimeout(a)/ / 3
ajax()          / / 4
Copy the code

Lines 1,2 are synchronous code and are executed directly in the main thread, while lines 3 and 4 are asynchronous functions that are assigned by the main thread to the timer trigger thread and the HTTP asynchronous thread, respectively, which handle asynchronous code

Asynchronous operation process

We mentioned the timer trigger the thread, the browser event thread and HTTP asynchronous threads are asynchronous operation process, distribution of these processes are mainly deal with the main thread of the asynchronous task, these are the main thread to throw the asynchronous task to specify their respective callback function, when the asynchronous operation process after perform the task, will be sending the callback function returns to the task queue.

Task queue

We can think of a task queue as a static queue storage structure (first-in, first-out) that holds callbacks thrown by an asynchronous process (after the asynchronous task has completed, its callbacks are thrown on the task queue). For example, the browser event process processes a click event, which has a callback function. After the click event completes, the browser event process sends the bound callback function to the task queue.)

Event loop

Event loop can be understood as a task or work, which is mainly used to detect the execution stack generated by the task queue and the main thread. Once the code in the execution stack is executed, the callback function will be automatically extracted from the task queue.

Event loop can understand into a mechanism or operation mode, can be: the main thread distribution of asynchronous tasks to asynchronous operations threads, thread asynchronous operations to perform a task distribution of the callback function to task queue, after the completion of the task queue holds the callback function, and then when the main thread after executing the code will extract the callback function in the task queue. This loop is called an Event loop

Everyone has his or her own way of understanding and thinking. No matter how to understand memory, this article has made students understand how to run Event loop.

The tail

In our actual development maybe don’t need to understand the Evnet loop influence on asynchronous operations, but in the us to a certain degree of learning and understanding, we will to a include the execution of the script for the asynchronous operation/function have more clear cognition, more clearly how it in the execution of a position and condition