What are JavaScript single threads and task queues?

1. Why is JavaScript designed to be single-threaded?

A major feature of the JavaScript language is that it is single-threaded. In other words, it can only do one thing at a time.

for(var j = 0; j < 5; j++) {
 console.log(j);
}
console.log('end');

The above code will not execute end until the for loop is executed;

The single thread of JavaScript is related to its purpose. As a browser scripting language, the main purpose of JavaScript is to interact with users and manipulate the DOM. This determines that it can only be single-threaded, otherwise it will cause very complex synchronization problems.

Assume that JavaScript has two threads at the same time. One thread adds content to a certain DOM node, and the other thread deletes the node. In this case, which thread should the browser use?

So, in order to avoid complexity, JavaScript has been single-threaded since its birth. This has become the core feature of this language and will not change in the future.

In order to take advantage of the computing power of multi-core CPUs, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads, but the child threads are completely controlled by the main thread and must not operate the DOM. Therefore, this new standard does not change the single-threaded nature of JavaScript.

2. Task Queue

"Task Queue" is an event queue (can also be understood as a message queue). When the IO device completes a task, it is added to the "Task Queue" An event indicating that related asynchronous tasks can enter the "execution stack". The main thread reads the "task queue", which means reading the events in it;

Let's explain:

Javascript is single-threaded, and single-threading means that all tasks need to be queued. The next task will not be executed until the previous task is completed. If the previous task takes a long time, the next task will have to wait.

If the queue is due to too much calculation, it is understandable that the CPU usage is high, but many times the CPU is idle or there is a large space that is not used, because the IO device (input and output device) ) is very slow (for example, Ajax operations read data from the network), and you can only continue execution after waiting for the results to come out.

The designers of the JavaScript language realized that the main thread can completely ignore the IO device, suspend these waiting tasks, and run the later tasks first. Wait until the IO device returns the result before executing the pending task.

Therefore, all tasks can be divided into two types, one is synchronous task (synchronous) and the other is asynchronous task (asynchronous).

Synchronous tasks refer to tasks queued for execution on the main thread. The next task can only be executed after the previous task has been executed;

Asynchronous tasks refer to tasks that do not enter the main thread. . For tasks that enter the "task queue", only when the "task queue" notifies the main thread that an asynchronous task can be executed will the task enter the main thread for execution.

Specifically, the operating mechanism of asynchronous execution is as follows. (The same goes for synchronous execution, since it can be considered an asynchronous execution without the asynchronous tasks.)

All synchronous tasks are executed on the main thread, forming an execution stack

Outside of the main thread , there is also a "task queue". As long as the asynchronous task has running results, an event is placed in the "task queue".

Once all synchronization tasks in the "execution stack" have been executed, the system will read the "task queue" to see what events are in it. Those corresponding asynchronous tasks end the waiting state, enter the execution stack, and start execution.

The main thread repeatedly executes the third step above.

for(var j = 0; j < 5; j++) {
  console.log(j);
  setTimeout(function() {
    console.log('timeout');
  }, 0);
}

console.log('end');

//Result 0 1 2 3 4 end timeout timeout timeout timeout timeout

The above is the detailed content of What are JavaScript single threads and task queues?. For more information, please follow other related articles on the PHP Chinese website!