Shulou(Shulou.com)06/01 Report--

This article mainly introduces how the JavaScript operating mechanism is, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The running mechanism of JS 1. Js single thread

One of the major features of the JavaScript language is single-threading, that is, you can only do one thing at a time.

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 to manipulate DOM. This determines that it can only be single-threaded, otherwise it will bring very complex synchronization problems. For example, suppose JavaScript has two threads at the same time, one thread adds content to a DOM node and the other thread deletes the node, which thread should the browser follow?

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

2. Js event loop

There are many tasks during the execution of js code, which are generally divided into two categories:

Synchronization task

Asynchronous task

When we open a website, the rendering process of the web page is a lot of synchronization tasks, such as the rendering of page skeletons and page elements. Resource-intensive and time-consuming tasks such as loading pictures and music are asynchronous tasks. Let's explain it with a map: let's explain this picture:

Synchronous and asynchronous tasks enter different execution "places", synchronously enter the main thread, asynchronously enter Event Table and register functions.

When the specified thing is done, Event Table moves this function into Event Queue.

If the task in the main thread is empty, it will go to Event Queue to read the corresponding function and enter the main thread for execution.

The above process is repeated over and over again, which is often called Event Loop (event cycle).

So when is the main thread execution stack empty? There is a monitoring process process in the js engine, which will constantly check whether the main thread execution stack is empty. Once it is empty, it will go to Event Queue to check if there are any functions waiting to be called.

This is the overall process of js running.

It should be noted that in addition to synchronous and asynchronous tasks, tasks can also be more subdivided into macrotask (macro tasks) and microtask (micro tasks), and js engines will give priority to micro tasks.

Micro tasks include callbacks to promise, process.nextTick in node, and MutationObserver to listen for Dom changes. Macro tasks include the execution of script scripts, timing events such as setTimeout, setInterval, setImmediate, etc., as well as Icano operations, UI rendering, and so on.

How to answer in the interview? Here is my personally recommended answer:

First of all, js runs in a single thread, and when the code is executed, the execution context of different functions is pressed into the execution stack to ensure the orderly execution of the code.

When executing synchronous code, if an asynchronous event is encountered, the js engine will not wait for the result to be returned, but will suspend the event and continue to execute other tasks in the stack

When the synchronous event is executed, the callback corresponding to the asynchronous event is added to another task queue that is different from the current execution stack to wait for execution.

The task queue can be divided into macro task alignment and micro task alignment. When the events in the current execution stack are finished, the js engine will first determine whether there are any tasks in the micro task queue, and if so, press the events at the head of the micro task queue into the stack for execution.

Judge the tasks in the macro task column after the micro task has been executed on the column.

Finally, you can use the following question to test the harvest:

SetTimeout (function () {console.log (1)}, 0); new Promise (function (resolve, reject) {console.log (2); resolve ()}). Then (function () {console.log (3)}); process.nextTick (function () {console.log (4)}) console.log (5)

The first round: when the main program starts to execute, if you encounter setTimeout, throw the callback function of setTimeout into the macro task queue, execute it immediately after executing new Promise, output the callback function of 2 then to the micro-task queue, and then continue to execute. If you encounter process.nextTick, you will also throw the callback function into the task queue, and then continue to execute. Output 5. When all synchronous tasks are completed, see if there are any micro-tasks that can be executed. It is found that there are two micro-tasks: then function and nextTick. Which one should be executed first? The asynchronous task specified by process.nextTick always occurs before all asynchronous tasks, so first execute process.nextTick output 4 and then execute the then function output 3, and the first round of execution ends. The second round: starting from the macro task queue, the setTimeout callback is found, and the output 1 is finished, so the result is 25431

Thank you for reading this article carefully. I hope the article "what is the operating mechanism of JavaScript" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.