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

How JavaScript works, many beginners are not very clear about it. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

Let's start with the language that the browser understands.

Browsers only understand 0 and 1s languages, that is, statements in binary / bit format.

We cannot easily convert the entire JavaScript to bits. So, what do we do now?

JavaScript engine:-"Hey, don't worry, I can provide you with JavaScript files."

So what is the JavaScript engine?

When the JavaScript file is loaded into the browser, JavaScript Engine executes the file line by line from top to bottom (asynchronous code will be an exception, which we'll see later in this series).

The JavaScript engine parses the code line by line and converts it to machine code (binary / bit format).

The browser can now understand the machine code and run accordingly.

Here are some examples of JS engines.

So what's in this javascript engine?

This is a very basic view of the JavaScript engine.

Memory heap

Sometimes the JavaScript engine cannot allocate memory at compile time, so variables allocated at run time go into the memory heap (an unstructured area of memory). Even if we exit the function that allocates memory in the heap, the data / objects we allocate in the heap still exist.

Here, we face a major memory leak problem.

So what is a memory leak?

There is limited space in the memory heap. If we continue to use heap space without worrying about freeing unused memory. This can cause memory leaks when there is no more memory available in the heap.

To solve this problem, the javascript engine introduces a garbage collector.

What is a garbage collector? Garbage collection is a form of memory management. Like a collector, it attempts to free up memory occupied by objects that are no longer in use. In other words, when a variable loses all references, garbage collection marks the memory as inaccessible and frees it.

Execute context stack

A stack is a data structure that follows the principle of last-in, first-out (LIFO) (the last item to enter the stack will be the first item to be removed from the stack).

ECS stores the execution context of all functions. The execution context is defined as an object that stores local variables, functions, and objects.

In short, each function is pushed to the top of the bag.

The JavaScript engine performs the function at the top of the stack.

Because the JavaScript engine has only one ECS, it can only do one thing at a time, which is the top of the ECS. This is what makes JavaScript single-threaded.

You must have heard of stack overflows.

What does that mean?-the space for ECS is also limited. So, if we continue to add functionality at the top of the stack. At some point, there will be no more space to add more stack frames. At this point, we get a stack overflow error.

Consider the following example.

Function heyJS () {console.log ("Hello you are awesometries created recently!"); heyJS ();} heyJS ()

Well, this goes into infinite recursion, and we have a stack overflow error.

So, as I mentioned, JavaScript is a simple threading language, which means that it has only one call stack advertisement, so only one statement can be executed at a time.

Wait, we've also heard of asynchronous programming with JavaScript. So how do you work when only one task is allowed at a time?

This is the Web API and callback queue.

Web API

Web API is not part of the JS engine, but rather part of the JavaScript runtime environment provided by Web browsers. JavaScript simply provides us with a mechanism to access these API. Because Web API are browser-specific, they may vary from browser to browser. In some cases, some Web API may exist in one browser but not in another.

Example:-

Document.getElementById (); document.addEventListerner (); setTimeOut (); setInterval (); for example:-console.log ("First!"); setTimeout () = > {console.log ("Second!");}, 1000); console.log ("Third!"); / * OutPut:- First Third Second * /

Isn't that weird?

The "second" is inside the setTimeout, so it will be executed in 1 second.

What happened behind the scenes?

After 1 second, WebAPI will be notified, Hey, you have code that needs to be executed immediately. WebAPI "Oh, this is console.log (), I need to execute it, but I can't execute it directly. Let's send it to Callback Queue"Hey, this is the callback Queue, please add it to the list and execute it."

Callback queue

Callback queues or message queues are queue data structures that follow the first-in-first-out principle (items that are first inserted into the queue will be removed from the queue first). It stores all messages moved from the event table to the event queue. Each message has an associated function. The callback queue maintains the order in which messages or methods are added to the queue.

Event cycle

The event loop constantly checks whether the execution context stack is empty and whether there are any messages in the event queue. The method is moved from the callback queue to ECS only if the execution context stack is empty.

Callback queue

Hey, please check if ECS is empty in the event loop. I have some callbacks that need to be pushed into ECS.

Event cycle

"queues, please give me a callback, ECS is now empty, I press them on the stack to execute them."

Finally, we will get the output.

/ / First / / Third / / Second

This is just an overview of how the JavaScript engine works.

I will try to learn more about the JavaScript engine in future articles.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.