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

This article mainly introduces "detailed introduction of JavaScript engine". In daily operation, I believe many people have doubts about the detailed introduction of JavaScript engine. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "detailed introduction of JavaScript engine"! Next, please follow the editor to study!

JavaScript engine

This is the main content that this article will explore, and it is responsible for making the computer understand the JS code we write. The JavaScript engine is an engine that converts our code into a machine-readable language. Without the JavaScript engine, the code you write would be a pile of "gibberish" to the computer. Not only JavaScript, but all other programming languages need a similar engine to convert this "gibberish" into a language that makes sense to the computer.

A variety of JavaScript engines are currently available. You can check all available JavaScript engines on Wikipedia. They are also called ECMAScript engines, and the exact reason for this will be mentioned below. Here are some JavaScript engines that we might use on a daily basis:

Chakra, Microsoft IE/Edge

SpiderMonkey, FireFox

V8, Chrome

In addition to other engines, you can search for their own understanding. Next, we'll take a closer look at these engines to see how they translate JavaScript files.

The interior of JavaScript engine

We already know that engines are necessary, so we can't help thinking:

Who invented the JavaScript engine?

The answer is, anyone can. It's just a tool for analyzing our code and translating it into another language. V8 is one of the most popular JavaScript engines and is also used by Chrome and NodeJS. It is written in C++, an underlying language. But if everyone creates an engine, the scene is out of control.

Therefore, in order to establish a specification for these engines, the ECMA standard was born, which mainly provides the specification of how to write the engine and all the functions of JavaScript. This is why the new features can be implemented on ECMAScript 6, 7, 8. At the same time, the engine has been updated to support these new features. As a result, we can check the availability of advanced JS features in the browser during the development process.

Let's take a closer look at the V8 engine because the basic concepts are consistent across all engines.

The above picture shows the workflow within JS Engine. The code we enter will go through the following stages:

Parser

AST

Interpreter generates ByteCode

Profiler

Compiler generates optimized code

Don't be fooled by the above process, you will understand in a few minutes that they work together.

Before going any further into these stages, you need to understand the difference between Interpreter and Compiler.

Interpreter VS Compiler

In general, there are two ways to convert code into a machine-readable language. The concepts we will discuss apply not only to JavaScript, but also to most programming languages, such as Python,Java.

Interpreter reads the substitution code line by line and executes it immediately.

Compiler reads your entire code, makes some optimizations, and then generates the optimized code.

Let's look at the following example.

Function add (a, b) {return ahumb} for (let I = 0; I

< 1000; i++) { add(1 + 1) } 上面的示例循环调用了 add 函数1000次，该函数将两个数字相加并返回总和。 1、Interpreter 接收上面的代码后，它将逐行读取并立即执行代码，直到循环结束。 它的工作仅仅是实时地将代码转换为我们的计算机可以理解的内容。 2、如果这段代码接受者是 Compiler，它会先完整地读取整个程序，对我们要执行的代码进行分析，并生成电脑可以读懂的机器语言。过程如同获取 X（我们的JS文件）并生成 Y（机器语言）一样。如果我们使用 Interpreter 执行 Y，则会获得与执行 X 相同的结果。 从上图中可以看出，ByteCode 只是中间码，计算机仍需要对其进行翻译才能执行。 但是 Interpreter 和 Compiler 都将源代码转换为机器语言，它们唯一的区别在于转换的过程不尽相同。 Interpreter 逐行将源代码转换为等效的机器代码。 Compiler 在一开始就将所有源代码转换为机器代码。 当您阅读完上面的推荐文章后，您可能已经了解到 Babel 实际上是一个 JS Compiler ，它可以接收您编写的新版本 JS 代码并向下编译为与浏览器兼容的 JS 代码（旧版本的 JS 代码）。 Interpreter 和 Compiler 的优缺点 1、Interpreter 的优点是无需等待编译即可立即执行代码。这对在浏览器中运行 JS 提供了极大的便利，因为所有用户都不想浪费时间在等待代码编译这件事上。但是，当有大量的 JS 代码需要执行时会运行地比较慢。还记得上面例子中的那一小段代码吗？代码中执行了1000次函数调用。函数 add 被调用了1000次，但他的输出保持不变。但是 Interpreter 还是逐行执行，会显得比较慢。 2、在同样的情况下，Compiler 可以通过用2代替循环（因为 add 函数每次都是执行1 + 1）来进行一些优化。Compiler 最终给出的优化代码可以在更短的时间内执行完成。 综上所述，Interpreter 可以立即开始执行代码，但不会进行优化。 Compiler 虽然需要花费一些时间来编译代码，但是会生成对执行时更优的代码。 好的，Interpreter 和 Compiler 必要知识我们已经了解了。现在让我们回到主题--JS 引擎。 因此，考虑到编译器和解释器的优缺点，如果我们同时利用两者的优点，该怎么办？ 这就是 JIT(Just In Time) Compiler 的用武之地。它是 Interpreter 和 Compiler 的结合，现在大多数浏览器都在更快，更高效地实现此功能。同时 V8 引擎也使用此功能。

In the process,

1. Parser is a parser that identifies, analyzes and classifies all parts of the program through a variety of JavaScript keywords. It can tell whether the code is a method or a variable.

2. Then, AST (Abstract Syntax Tree) constructs the tree structure based on the classification of Parser. You can use AST Explorer to view the structure of the tree.

3. Then provide AST to Interpreter to generate ByteCode. As mentioned above, ByteCode is not the lowest level of code, but it can be executed. At this stage, browsers use the V8 engine to perform ByteCode for work, so users don't have to wait.

4. At the same time, Profiler will look for code that can be optimized and pass them on to Compiler. While Compiler generates optimization code, the browser temporarily uses ByteCode to perform operations. And once the Compiler generates the optimization code, the optimization code completely replaces the temporary ByteCode.

In this way, we can make full use of the advantages of Interpreter and Compiler. While Interpreter executes code, Profiler looks for code that can be optimized, and Compiler creates optimized code. Then, replace the ByteCode code with the optimized lower-level code, such as machine code.

This only means that performance will improve gradually, and there will be no blocking execution time.

About ByteCode

As machine code, ByteCode cannot be understood and executed by all computers. It still requires middleware such as a virtual machine or a Javascript V8 engine to convert it into a machine-readable language. This is why our browsers can execute ByteCode in Interpreter with the help of the JavaScript engine in the above five stages.

So you may have another question.

Is JavaScript an interpretive language?

JavaScript is, but not entirely, an interpretive language. Brendan Eich originally created the JavaScript engine "SpiderMonkey" in the early stages of JavaScript. The engine has an Interpreter to tell the browser how to execute the code. But now our engine includes not only Interpreter, but also Compiler. Our code can not only be converted to ByteCode, but also compiled and output optimized code. So, technically, it all depends on how the engine is implemented.

At this point, the study of "detailed introduction to JavaScript engine" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.