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

V8 engine how to execute JavaScript code, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

The V8 engine mentioned in the title will naturally be associated with Node.js.

Let's first take a look at the official definition of Node.js:

Node.js is a JavaScript runtime environment based on V8 JavaScript engine

But for many of our students, this sentence is very general, such as throwing out the following questions:

What is the JavaScript runtime environment?

Why does JavaScript need a special operating environment?

What is the JavaScript engine?

What is V8?

It doesn't matter if the above questions are generally understood by the students. This article will reveal the answers in turn.

Let's first figure out these concepts, and then let's see what Node is. Why the big front end needs it.

JavaScript is everywhere

Jeff Atwood, one of the founders of Stack Overflow, proposed the famous Atwood law a few years ago:

Any application that can be implemented using JavaScript will eventually be implemented using JavaScript.

At the place of invention, the purpose of JavaScript is to execute simple script tasks in the browser and perform various operations on the browser and the DOM in it, so the application scenario of JavaScript is very limited.

But with the emergence of Node, Atwood's law has been more and more proved to be correct.

But in order to understand how Node.js helps us do this, we have to understand how JavaScript is run.

Now let's think about how JavaScript code is executed in browsers.

Browser kernel

Different browsers have different kernel components:

Gecko: used early by Netscape and Mozilla Firefox browsers

Trident: developed by Microsoft and used by IE4~IE11 browsers, but Edge browsers have turned to Blink

Webkit: Apple is based on KHTML, open source, and previously used for Safari,Google Chrome

Blink: a branch of Webkit, developed by Google, currently used in Google Chrome, Edge, Opera, etc.

Wait a minute.

In fact, the browser kernel we often talk about refers to the browser's typesetting engine:

Typesetting engine (layout engine), also known as browser engine (browser engine), page rendering engine (rendering engine), or template engine.

After introducing the typesetting engine of the browser, let's introduce the working process of the rendering engine of the browser.

The process by which the rendering engine works

The working process of browser rendering engine

As shown above:

After the corresponding Parser parsing, HTML and CSS will form the corresponding DOM Tree and CSS Tree.

After additional compositing, they will form a Render Tree and generate a Layout layout at the same time, and finally through the browser's rendering engine to help us complete the drawing, showing the usual Hmtl pages

In the HTML parsing process, if encountered, it will stop parsing HTML and give priority to loading and executing JavaScript code (this process is completed by the JavaScript engine)

Because JavaScript is a high-level language (Python, C++, Java), the JavaScript engine converts it first to assembly language, then to machine language (binary 010101), and finally to CPU.

JavaScript engine

Why do you need a JavaScript engine?

In fact, the JavaScript we write, whether you give it to the browser or Node for execution, needs to be executed by CPU in the end.

But CPU only knows its own instruction set, which is actually a machine language, and can be executed by CPU.

So we need the JavaScript engine to help us translate JavaScript code into CPU instructions to execute.

What are the more common JavaScript engines?

SpiderMonkey: the first JavaScript engine, developed by Brendan Eich (i.e., JavaScript author)

Chakra: developed by Microsoft for IT browsers

JavaScript engine in JavaScriptCore:WebKit, developed by Apple

The powerful JavaScript engine developed by V8:Google also helps Chrome stand out from many browsers

Above we introduced the JavaScript engine and browser kernel, but some students should ask what are the connections and differences between them?

Next, I'll take the WebKit kernel as an example.

WebKit kernel

In fact, the WebKit kernel consists of two parts:

WebCore: responsible for HTML parsing, layout, rendering and other related work

JavaScriptCore: parsing and executing JavaScript code (the work of the JavaScript engine)

Another powerful JavaScript engine is the V8 engine.

V8 engine

Let's take a look at the official definition of V8 engine:

Support language: V8 is an open source high-performance JavaScript and WebAssembly engine for Google written in C + +, which is used for Chrome, Node.js, etc.

V8 can run assembly languages compiled by JavaScript and WebAssembly engines, etc.

Cross-platform: it implements ECMAScript and WebAssembly, and in Windows 7 or later, macOS 10.12 + and uses x64 JIAR 32

Running on Linux systems with ARM or MIPS processors

Embedded: V8 can be run independently or embedded in any C + application

How the V8 engine works

Diagram the working principle of the V8 engine

Diagram the working principle of the V8 engine

Among them, * * Parse (parser), lgnition (interpreter) and TurboFan (optimized compiler) are all built-in modules of the V8 engine.

If there is such a piece of JavaScript source code:

Console.log ("hello world"); function sum (num1, num2) {return num1 + num2;}

The Parse module converts JavaScript code into AST (abstract syntax tree) because the interpreter does not directly recognize JavaScript code

If the function is not called, it will not be converted to AST

Parse V8 official document: https://v8.dev/blog/scanner

Ignition is an interpreter that converts AST to ByteCode (bytecode)

At the same time, it collects the information needed for TurboFan optimization (such as the type information of function parameters, which can be used for real operations).

If the function is called only once, Ignition executes the interpretation execution ByteCode

Ignition V8 official document: https://v8.dev/blog/ignition-interpreter

TurboFan is a compiler that compiles bytecode into machine code that can be executed directly by CPU

If a function is called multiple times, it will be marked as a hot function, and it will be converted into optimized machine code by TurboFan to improve the execution performance of the code.

However, the machine code will actually be restored to ByteCode, because if the type changes during the subsequent execution of the function (for example, the sum function originally executes the number type, but then the execution changes to the string type), the previously optimized machine code can not handle the operation correctly and will be inversely converted to bytecode.

TurboFan V8 official document: https://v8.dev/blog/turbofan-jit

The above is the execution of the JavaScript code. In fact, the memory recovery of V8 is another reason for its power.

The Orinoco module, which is responsible for garbage collection, collects unwanted memory in the program

Orinoco V8 official document: https://v8.dev/blog/trash-talk

About the garbage memory collection mechanism of V8 engine, you can take a look at my previous article "Classical sublimation" garbage memory collection mechanism of V8 engine.

Programming languages fall into two broad categories:

Interpretive language: relatively inefficient (such as JavaScript)

Compiled languages: relatively efficient (e.g. C++)

The above situation corresponds to the general execution process of JavaScript interpretive language, but the compiling language is often not, such as Cellular languages, for example, some applications in the system are written in C++, and when they are executed, they will be directly converted into machine language (binary format 010101) and handed over to CPU for unified execution, so the running efficiency is naturally relatively high.

But V8 also optimizes the interpretive programming language, that is, the TurboFan optimization compiler mentioned above. If a JavaScript function is called many times, it will be grabbed into optimized machine code by TurboFan and executed by CPU to improve the execution performance of the code.

Review: what is Node.js

Review: official definition of Node.js:

Node.js is a JavaScript runtime environment based on the V8 JavaScript engine.

In other words, Node.js executes JavaScript code based on the V8 engine, but not just the V8 engine:

We learned earlier that V8 can be embedded in any C + + application, whether it's Chrome or Node.js, actually embedded in the V8 engine.

To execute the JavaScript code

But in the Chrome browser, we also need to parse and render HTML, CSS and other related rendering engines. In addition, we also need to provide API to support browser operations and the browser's own event loops, all of which are done by the browser kernel for us.

In addition, we also need to do some additional operations in Node.js, such as file system read / write, network IO, encryption, compression and decompression of files, etc.

Operation

PS: in later articles, I will lead you to explore the world of Node.js step by step.

Differences between browser and Node.js architecture

Briefly compare the differences between Node.js and browser architecture:

Differences between browser and Node.js architecture

In the Chrome browser

For example, if a network request is sent, the middle layer will call the network card in the operating system.

Read some local files, and the middle layer will call the hard disk in the operating system.

When the browser page is rendered, the middle layer will call the graphics card in the operating system.

Wait a minute.

The V8 engine is only a small part of it, which is used to assist the running of JavaScript code.

There are also some browser kernels that are responsible for HTML parsing, layout, rendering and other related work.

Middle tier and operating system (network card / hard disk / video card.)

In Node

V8 engine

The middle tier (libuv) includes EventLoop, etc.

Operating system (network card / hard disk / video card.)

Node.js architecture

Let's look at an architecture diagram of a separate Node.js:

The JavaScript code we write will go through the V8 engine, and then dispatch the task to the event loop of Libuv through Node.js 's Bindings (Node.js API).

Libuv provides event loops, file system reads and writes, network IO, thread pools, etc. Libuv is a library written in C

For the specific internal code execution process, I will specifically explain the event queue mechanism in Node.js and the principle of asynchronous IO in later articles.

Node.js architecture diagram

Application scenarios of Node.js

The rapid development of Node.js also makes enterprises pay more and more attention to Node.js technology.

So what are the practical application scenarios?

At present, the libraries developed at the front end are managed in the form of node packages.

Npm and yarn tools have become the most frequently used tools for front-end development.

More and more companies are using Node.js as a web server development

A large number of projects need to complete isomorphic applications of front and rear rendering with the help of Node.js.

Many enterprises are using Electron to develop desktop applications

REPL of Node.js

What is REPL? It feels very high-end.

REPL is the abbreviation of Read-Eval-Print Loop, translated as "read-evaluate-output" loop.

REPL is a simple, interactive programming environment

In fact, the console of our browser can be seen as a REPL.

Node also provides us with a REPL environment where we can walk through simple code.

REPL of the browser

REPL of Node

After reading the above, have you mastered how the V8 engine executes JavaScript code? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.