How JavaScript works (JavaScript works) (a) engine, runtime, function call stack

Personal Summary: This article on the JS bottom of the working principle is introduced.

Original: HTTPS://BLOG.SESSIONSTACK.COM/HOW-DOES-JAVASCRIPT-ACTUALLY-WORK-PART-1-B0BACC073CF

One, engine, runtime, call stack

This is the first chapter of how JavaScript works. This chapter provides an overview of the language engine, runtime, and call stack.

In fact, there are a lot of developers who use JavaScript every day in their daily development but don't know their underlying knowledge.

Overview

Almost everyone has heard about the concept of the V8 engine, and many people know that JavaScript is single-threaded, or that it uses a callback queue.

In this chapter, I'll take a detailed look at these concepts and explain how JavaScript works. Depending on the details, you will probably write better, non-blocking programs by using the APIs provided appropriately.

If you are a novice, this article will help you understand why it is inconceivable to compare JavaScript with other languages.

If you are an experienced JavaScript developer, hopefully, it will give you a deeper understanding of how the JavaScript runtime works.

JavaScript engine

Google V8 engine is one of the popular JavaScript engines. V8 engines are used internally, such as Chrome and node. js. Here is a simple view to depict its approximate.

The engine consists of two main components:

• Dynamic memory management-allocating memory here
• Call stack-Here code execution is your stack structure

Run-time

Almost every JavaScript developer has used some browser APIs (such as SetTimeout). However, these APIs are not provided by the engine.

So where did they come from?

Actually, the situation is a little complicated.

So, in addition to the engine but in fact there are many other things. There are things called Web APIs that are provided by browsers, such as Dom,ajax,settimeout and others.

As a matter of case, there is a popular event loop and callback queue.

Call stack

JavaScript is just a single-threaded programming language, which means it has only one call stack. So it can only do one thing at a time.

The call stack is a data structure that records the approximate position we have in the program. When execution enters a function, place it at the top of the stack. If returned from the function, removes the function from the top of the stack. This is what the call stack can do.

Give me a chestnut. See the following code:

function multiply(x, y) {  return x * y;}function printSquare(x) {  var s = multiply(x, x);  console.log(s);}printSquare(5);

When the engine starts executing this code, the call stack is emptied. After that, the following steps are generated:

Each entry in the call stack is called a stack structure.

This is exactly how the stack trace is constructed when an exception is thrown-this is basically the state of the call stack when an exception occurs. Look at the following code:

function foo() {  throw new Error(‘SessionStack will help you resolve crashes:)‘);}function bar() {  foo();}function start() {  bar();}start();

If executed in Chrome (assuming the code is in a foo.js file), the following stack trace will be generated:

"Stack Overflow"-occurs when you reach the maximum call stack size. This is fairly easy to happen, especially when you're using recursion without carefully examining the code. Look at the following code:

function foo() {  foo();}foo();

When the engine starts executing this code, it starts calling the Foo function. This function, however, will be recursively merged to start calling itself without any end condition. So during each step of execution, the call stack adds the same function over and over again. The execution process is as follows:

At some point, however, the number of function calls in the call stack exceeds the actual size of the call stack, so the browser decides to throw the wrong action as follows:

Running code in a single thread can be quite easy because you don't have to deal with some of the complexities of multithreaded environments, such as deadlocks.

However, there is a considerable limit to running code on a single thread. Since JavaScript has only one call stack, what happens if it runs slowly?

Concurrency and Event loops

What happens when you have a function in the call stack that consumes a lot of time in order to complete the operation? For example, imagine that you want to use JavaScript in your browser to perform some complex image transformations.

You might ask-why is that a problem? The problem is that when the call stack has a function that needs to be executed, the browser can't actually do anything else-it's blocked. This means that the browser is not able to perform rendering, it cannot run other code, it is stuck. This can be a problem if you want to have a cool, smooth UI experience in your app.

This is not the only problem. Once the browser starts to perform so many tasks in the call stack, the browser will stop interacting for quite some time. Most browsers will throw an error asking if you want to close the page.

Now, that's not the best user experience, is it?

So how do you run slow code without blocking the UI and not letting the browser stop responding? Use asynchronous callbacks.

This will be explained in detail in "How JavaScript Works" Chapter II: "5 tips on how to write the best code in the V8 engine."

How JavaScript works (JavaScript works) (a) engine, runtime, function call stack