Engine, run time, call stack

The original article can be found here

See Github addresses in updates to this serieshere.

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

As JavaScript becomes more popular, teams are taking advantage of its support at different levels in their development stack such as front end, back end, hybrid apps, embedded devices, and more.

This is the first chapter in a series that aims to dig deep into JavaScript and understand how it works: We think you’ll write better code and apps by understanding the building blocks of JavaScript and how they all work together. We’ll share some rules of thumb when creating SessionStack, a lightweight JavaScript program that has the advantages of robustness and high performance to stay competitive.

As GitHut Stats shows, JavaScript is number one on Github in terms of active libraries and total pushes. Other aspects of performance are not much worse than other languages.

(Check out the latest Github language statistics.)

If the project relies heavily on JavaScript, that means developers have to use JavaScript and everything its language ecosystem has to offer, and have a deeper understanding of the inner workings of the JavaScript language in order to be able to create cool software.

In fact, there are many developers who use JavaScript on a daily basis but don’t understand the underlying knowledge.

An overview of the

Almost everyone has heard of the V8 engine concept, and many know that JavaScript is single-threaded or uses callback queues.

In this chapter, I’ll go over these concepts in detail and explain how JavaScript works. By understanding these details, you will be able to write better, non-blocking applications by making proper use of the APIs provided.

If you’re new to JavaScript, this article will help you understand why JavaScript is incredible compared to other languages.

Hopefully, if you’re an experienced JavaScript developer, this will give you a deeper understanding of how JavaScript runtime works.

JavaScript engine

Google V8 is one of the most popular JavaScript engines. The V8 engine is used internally in things like Chrome and Node.js. Here’s a simple view of what it looks like.

The engine consists of two main components:

  • Dynamic memory management – Allocates memory here
  • Call stack – where code execution is your stack structure

The runtime

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

So where do they come from?

Actually, it’s a bit complicated.

So, it’s not just the engine but there’s actually more to it than that. There are things called Web apis that are provided by browsers, such as DOM,AJAX,setTimeout, and so on.

As a result, there are popular event loops and callback queues.

The 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 keeps track of where we are in the program. When executing a function, place it at the top of the stack. Removes the function from the top of the stack if returned from the function. This is what the call stack can do.

Here’s an example. Check out the following code:

function multiply(x, y) {
  return x * y;
}

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

printSquare(5);
Copy the code

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

Each entry in the call stack is called the 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. Take a look at this code:

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

function bar() {
  foo();
}

function start() {
  bar();
}

start();
Copy the code

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

“Stack overflow “- occurs when you reach the maximum call stack size. This can happen quite easily, especially if you use recursion without carefully examining the code. Check out the following code:

function foo() {
  foo();
}

foo();
Copy the code

When the engine starts executing this code, it starts calling foo. This function, however, will recurse and start calling itself without any end conditions. So at each step, 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 shown below:

It’s pretty easy to run code in a single thread because you don’t have to deal with some of the complications that occur in a multi-threaded environment, like deadlocks.

But running code in a single thread can be quite limiting. 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 takes a lot of time to complete? For example, imagine that you want to perform some complex image transformations in JavaScript in your browser.

You may ask – why is this a question? The problem is that when the call stack has a function to execute, the browser can’t really do anything else – it’s blocked. This means that the browser can’t render, it can’t run other code, it’s stuck. This can be a problem if you want a cool, smooth UI experience in your app.

That can’t be the only problem. Once the browser starts performing so many tasks in the call stack, the browser will stop interacting for quite some time. Most browsers will throw an error asking you if you want to close the page.

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

So how do you execute slow code without blocking the UI and making the browser stop responding? Use asynchronous callbacks.

This will be explained in more detail in Chapter 2 of “How JavaScript Works” : “5 Tips for Writing Best Code in a V8 Engine.”

Make an advertisement ^.. ^

Toutiao is hiring! Send resume to [email protected], you can take the fast internal push channel, long-term effective! The JD of the international PGC department is as follows: c.xiumi.us/board/v5/2H… , can also be pushed inside other departments!

See Github addresses in updates to this serieshere.