Deep understanding of JavaScript execution (single-threaded JS)

Introduce a,

As js gets deeper and deeper, you may wonder how it works in the browser after using js for so long. It’s embarrassing. So, I look up a lot of information to summarize the JS implementation process, also share, and learn together with you.

Single threaded JS engine, single thread, execution stack, execution context

Second, JS engine

JS engine is an important part of the browser, mainly used to read and execute JS. This guy is doing JS, but it’s not just doing JS.

Javascript engine for major browsers:

Although each browser’s JS engine is different, they all execute JS in much the same way.

Third, JS execution is single thread

Single thread means that the Js engine only has one thread for it to execute. That is, Js execution is single threaded.

Let’s talk about threads in general

• One might wonder, what is a thread?

Let me just take the straight point example, you open a browser (application), and the browser is a process. There are a lot of things to do when you open a browser: send a request, accept a request, render a page, execute JS, etc. These are just threads.

Here I just say briefly, specific we can find computer operating system information in-depth study.

Why is Js single threaded

• You may wonder why js execution is single threaded, if multithreading can not execute faster?

This goes back to Js history. Brendan Eich created Js in 10 days. What was JS used for? Simple browser interaction, validation, dom manipulation. If one thread reads the DOM node at the same time another thread deletes the DOM node. So js one thread is enough, that is, step by step down order.

To prove that JS execution is single threaded

A single thread can only execute in a queue, so executing the following code blocks (with a while loop) and does not pop hello

while(1){}
alert('hello');
Copy the code

4. Execution stack

To implement single threaded JS execution, the JS engine maintains an execution stack. (In and out)

Here’s an example of how the stack works when running this code.

SayHello ();function sayHello(){
    var message = getMessage();
    console.log(message);
}
function getMessage() {return 'hello';
}

Copy the code

Perform stack code emulation

Var exeStack = []; Exestack.push (exestack.push ('globalContext'); Exestack.push (sayHello, ok, exestack.push ('sayHello'); Exestack.push (sayHello) exestack.push (sayHello)'getMessage'); // After executing the getMessage function, pop exestack.pop (); Exestack.push (sayHello, console.log, exestack.push ('console.log'); Exestack.pop (); exestack.pop (); Exestack.pop (); exestack.pop (); Exestack.pop (); exestack.pop ();Copy the code

Execution stack diagram:

This is mainly a general process of JS execution, but you may wonder, what are the blocks (abstractions) that are pushed into the stack? I can tell you that it’s the execution context, global is the global execution context, and the other is the function execution context, and what exactly those contexts contain, I’ll write about in the next article.

Five, the summary

This article is mainly will js single thread is what, and how to achieve single thread. To get an idea of the overall JS execution process, we’ll talk more about it next. It’s like a digger. Dig deep.

If you’re having trouble, you’re probably making progress