preface

Recently in the “YOU DON’t KNOW JS” book, which talked about the compilation principle of JS, just macro and simple introduction, so I wrote this article, one summarizes the traditional language compilation and JS compilation principle, two to expand the compilation principle I understand

Compilation principles of traditional compiled languages

In traditional compiled languages, compilation takes three steps

  1. Lexical analysis

First the compiler breaks down the code into meaningful lexical units

  1. Syntax analysis

Next, the flow of lexical units (arrays) is parsed into a hierarchical nested tree of elements that represents the syntax structure of the program. This Tree is called the Abstract Syntax Tree (AST) 3. Code generation

The final process converts the AST parsed above into executable code. In plain English, there is some way to turn the AST into a set of machine instructions

I draw the above process as follows:

JS compilation principle

The steps of a JS engine to compile are very similar to those of a traditional compiled language, but are much more complex than those of a language that only compile in three steps. For example, there are specific steps in the lexical analysis and code generation phases to optimize runtime performance, including for redundant elements

Also, with JS, most of the time compilation takes place within a few microseconds (or less) before the code executes

Simply put, any JS snippet is compiled before it can be executed

I understand the principle of JS compilation

To understand how JS builds, we have to look back at how JS works. I’ll run it JS in three steps

  1. Lexical and grammatical analysis
  2. precompiled
  3. Explain to perform

Usually before JS code execution, the system will first perform lexical and grammatical analysis, scanning the whole article to see whether there are grammatical errors, errors, program termination, no errors will go to the pre-compilation link

Precompilation takes place just before the function is executed. The process is divided into four steps: 1. Create the AO object. (Active Object, execution-time context) 2. Find the parameter and variable declaration, and use the variable name and parameter name as the attribute name of the AO Object, the value is undefined; 3. Unify arguments and parameters. 4. Find the function declaration (excluding the function expression) in the function body, and suspend the function declaration name as the property name of the AO object with the value of the function.

At the moment before Global execution begins, Global precompilation takes place and the resulting Object is GO(Global Object)

Precompilation does not begin to interpret executing code until it has been executed, reading line by line, reading line by line. The reading process turns code into executable code

The whole process is simply drawn as follows:

As you can see, one of the major features of JavaScript engines compared to traditional compilation is the addition of a pre-compiled part. After precompilation, the engine parses the code into executable code and then executes the code

This is how the JS engine works

YOU DON’t KNOW JS

Note: novice white, plus the first document, it is inevitable to run off. There are incorrect understanding, hope the criticism pointed out, I will timely correct, thank you!!