Detailed explanation of single thread and event loop in JS

Js is single-threaded, and the js code is executed sequentially from top to bottom. For example, if we write two functions, the upper function must be executed first, and the lower function will be executed later. But this kind of single thread has a very big problem, that is, when it encounters a time-consuming task, subsequent tasks can only wait for it to finish executing before proceeding. For example, an ajax request obtains data from the server, which is inherently time-consuming. If the network is slower, it will be even more time-consuming. Then we can only wait for the result to be returned, and then execute it after the result comes out. During the waiting process, what does the user do? Nothing can be done. If it is during the rendering stage, it will also prevent the UI from being rendered. The user can only see a blank page, which is a poor experience.

What to do with this kind of time-consuming task, js decided to put it aside, run the subsequent tasks first, and then come back to handle these time-consuming tasks. This introduces the concept of asynchronous, because the order in which we write code is inconsistent with the order in which it is executed. There are three functions below, two basic functions, and an ajax function (for asynchronous operation). Our writing order is ajax -> add -> subtract, but the execution order is add -> sbutract -> ajax;

function add(num1,num2) {    return num1 + num2;
}function subtract(num1,num2) {    return num2 - num1
}function ajax() {    var url = 'http://jsonplaceholder.typicode.com/posts/1';    var xhr = new XMLHttpRequest();
    xhr.open("GET",url); 
    xhr.onload= function () {
        console.log(xhr.responseText)
    }
    xhr.send()
}ajax();

console.log(add(3,5))

console.log(subtract(3,5))

This leads to another question, where are the asynchronous tasks placed? It will be executed later. When will it be executed? In fact, we should pay attention to a problem here. It is not our js that actually performs the ajax operation, but the browser. It is the http request issued by our browser. When js executes the ajax function, it actually tells the browser to execute the http request, and then returns immediately to execute the code behind it, which is the add and substract functions. So what should we do after the browser executes the http request and gets the data from the server? It then executes our callback function (onload function), which is to pass the returned data to the callback function, and then insert the callback function into the event (task) queue. When js finishes running the add and subtract functions, there is nothing to do, so it will poll the event (task) queue. As soon as it polls, it will find that there is an onload callback function, then it will fetch it Come out and execute this function. During the running of the program, js will continue to perform polling until the program ends.

　Js code is divided into two parts during the running process of the entire program. One is like the add function, and the other is like the ajax onload callback function. The corresponding js operation is also divided into two parts. There are two parts, one is the main thread, and the other is the task (asynchronous callback function) queue.

The specific operation of the js code is as follows:

1. As soon as the js code is loaded, it will be executed sequentially from top to bottom. It will also enter a global execution environment. When it encounters ajax When operating asynchronously, it will tell the browser to execute the request, and then return immediately to execute the following code. When it encounters the add function call, it will enter the function execution environment. After executing the add function, it will encounter the subtract function again. It will enter the function execution environment again. Of course it's simpler here, there are no nested functions. If there is a function nested in the function, then it will enter the execution environment of the sub-function, as shown in the figure below, which forms an execution stack. After the upper one is executed, the lower one is executed until the code in the global execution environment After execution is completed, the execution stack is empty, which is the main thread of js.

　2. The browser executes the http request. In the future, it will either obtain data from the server or fail. At this time, it will report the success of our registration. Or the failed callback function is put into the task (callback function) queue.

　3. When all the codes in the execution stack are executed, that is, when the execution stack is empty, js will poll our task queue (picture on the left), If there is a task, it will take out the first task (registered callback function) from the starting position of the task queue and put it on the execution stack for execution (picture on the right). After the callback function is executed, the execution stack will be empty again. js will then poll our task queue. If there is a callback function, it will take out the first one and put it on the execution stack for execution. During the execution of the entire program, js will keep polling our task queue. Once there is a task, it will be executed. This is the event loop.

All programs are executed on the stack. Only when the execution stack is empty, it has the ability to handle the next task. As long as a function enters the execution stack, the stack is not empty. If the stack is not empty, the next function cannot be processed and can only wait until the function is executed. This is called "run–to-complete" and can only do one thing at a time. This also requires that our callback function cannot perform too many tasks. If too many tasks are performed, the stack will not be empty, which will prevent the execution of the next task, causing blocking.

The above is non-blocking in js.

Related recommendations:

JavaScript running mechanism Why JavaScript is single-threaded

The use of single-threaded JS and multi-threaded browsers

Detailed explanation of native JS asynchronous and single thread

The above is the detailed content of Detailed explanation of single thread and event loop in JS. For more information, please follow other related articles on the PHP Chinese website!