preface

However, anyone who does front-end work should know how important Javascript is. Looking at the current mainstream technology stack, such as Vue, React and Node, which are all based on Javascript, one point must be mentioned here. Only if you have a deep understanding of Javascript implementation mechanism, To be able to use it with ease. Okay, let’s get to the point

Extend the pre –

Single thread

Javascript Single threading – To quote Speckle: One of the language features of Javascript (and the core of the language) is single threading. What is a single thread? To put it simply, you can only do one thing at a time. When you have multiple tasks, you can only complete one task in order before executing the next one.

Why is JS single threaded

JavaScript was originally designed to be used in browsers. As a browser scripting language, JavaScript is mainly used to interact with users and manipulate the DOM. If JavaScript is multi-threaded in a browser, it will cause complex synchronization problems

For example, if JavaScript has two threads at the same time, one adding content to a DOM node and the other removing the node, which thread should the browser use?

In order to avoid complexity, JavaScript has been single-threaded since its birth. In order to improve CPU utilization, 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 cannot operate the DOM. So this standard doesn’t change the single-threaded nature of JavaScript;

Event Loop

In Javascript execution, it is divided into synchronous task and asynchronous task. The synchronous task and asynchronous task respectively enter different threads, synchronously enter the main thread, and asynchronously enter the Event Table (Event list) and register functions. When the specified asynchronous task completes, the Event Table moves this function to the Event Queue. When the task execution in the main thread is empty, the Event Queue will read the corresponding function and enter the main thread for execution. This process is repeated over and over again, known as an Event Loop.

Take a look at a graph

Truth comes from practice

Synchronous mode

The description in plain English may not be so easy to understand, so I will express it through a piece of code

console.log(1) function hs () { console.log(3) } function hs2 () { console.log(2) hs() } hs2() console.log(4) // And I'm sure you know 1,2,3,4Copy the code

The Event Loop is executed from top to bottom, so the output is: 1,2,3,4

Asynchronous mode

Again, let’s do it in a piece of code

console.log(1) setTimeout(function hs () { console.log(2) },2000) setTimeout(function hs2 () { console.log(3) SetTimeout (function hs3 () {console.log(4)},3000)},1000) console.log(5Copy the code

How is it implemented? Following the Event Loop rule above, let’s get our logic straight (regardless of the global call stack)

  1. Js single-threaded top-down execution, go to console.log(1), push > execute call stackPrint 1> the stack
  2. Then, go to the first setTimeout and perform the push operation > Execute the call stack (hs function is performed after registering the Event in the Event Table for 2 seconds) > Exit the stackNotice that no code is executed, just the corresponding event is registered in the event list
  3. Next, go to the second setTimeout to push the stack > Execute the call stack (execute the HS2 function one second after registering the Event in the Event Table) > Exit the stackSame as step 2
  4. Finally, go to console.log(5). Similarly, push > Execute call StackPrint 5> the stack
  5. At this point, the entire sample code, there is no code to execute in the call stack, and the console prints 1,5

The call stack is gone, but it is still in our event list, step 2,3

  1. So what’s Js going to do? It’s going to move the registered events from the Event Table to the Event Queue in order of execution. What’s the move to the Event QueueEvent LoopEvent loop, soEvent LoopWhen will it be implemented? Looking at Step 5, there are no tasks in the call stack to execute, and the corresponding function is read from the event queue and executed, ok
  2. throughEvent loopEvent loop from event queueEvent QueueTo read the corresponding function into the execution stack
  3. After 1s, execute HS2 function, push > execute call stack ·Print 3(Execute the HS3 function after registering the Event in the Event Table for 3s) > Exit the stack
  4. After 2 seconds, execute hs function, push > execute the call stackPrint 2> the stack
  5. At this point, there is no more code in the call stack to execute, and likewise, look in the event list
  6. Alas, there is a 3s after execution function HS3, moves to the event queue, through the event loop, pushes > calls to the execution stackPrint 4> the stack
  7. over

These 12 steps describe the execution rules of Event Loop in detail, and also clearly express the execution logic of the above code. Look twice carefully, and you will be sure

Over, I also drew a picture with my hands to see if it could help people understand a little more

A little encouragement, a lot of growth, welcome to like