preface

This article has included making https://github.com/ponkans/F2E (a big monster is finishing the front-end knowledge skill tree), welcome to Star, continuously updated 💧

We write JavaScript every day. How does every line of code we write get executed?

We often say that JavaScript is an interpreted language, but how is it interpreted?

This article focuses on how V8 implements JavaScript, and I hope you have learned some things after reading it:

  • What’s the difference between a compiler and an interpreter
  • What is abstract syntax tree AST
  • What is JIT technology
  • JavaScript execution flow

Compiler, interpreter

First of all, we need to make it clear that our code can not be directly executed by the CPU, because the CPU can only recognize binary instructions, but binary instructions are like 10111011111100110, obviously, if we write a program, are directly using binary, how difficult it can be.

It would be extremely painful and error-prone for engineers to give you a map of binary instructions and tell you what each string of binary instructions does.

This is where the assembly reason comes in. We map each complex binary instruction into an assembly instruction, which greatly reduces our memory and makes our code maintainable and extensible. For example, the following assembly instruction:

  • The add instruction: adds two operators and writes the result to the first operator.
  • Mov instruction: Used to write a value to a register.
  • …

Although assembly language is much simpler than machine language, it is undeniable that assembly language is still unacceptable to most engineers.

And then this legendary man, ‘wrote’ the most beautiful assembly code, who is he?

Is it possible that every Internet tycoon has a secret code behind him?

Not everyone is A Teacher ray, and even if we write a relatively simple function in assemblies, it takes a lot of assembly code. It can be analyzed from the following two pain points.

  • There are many kinds of cpus, and different cpus have different instruction sets, so we need to write a specific set of assemblies for each CPU that we implement each function
  • Assembly directly docking machine instructions, to write a good assembly, we need a very good computer base, such as some hardware knowledge, some things at the bottom of the operating system, need to master, or it is difficult to write high-quality assembly code

And then the reality is that most engineers, especially those in the front-line business team, don’t know that much about the bottom layer, and they spend most of their time on business logic, and they don’t have time to work on the bottom details.

In summary, compilation is not what we want!!

We want language that addresses these pain points, that is refreshing and refreshing to write.

As a result, so-called high-level languages were born. JavaScript, PHP, Java, Python, etc are all high-level languages.

Similarly, these high-level languages cannot be executed directly by the CPU and, like assembly language, require conversion.

There are two ways to handle and execute these high-level languages: compile execution or interpret execution.

Compile implementation

The compiler converts the intermediate code into machine code (usually binary files), which is then directly executed by the CPU.

Explain to perform

Interpreted execution is the opposite of compiled execution, where intermediate code is executed directly by the interpreter and output results, whereas compiled execution needs to be compiled into machine code first.

You can’t have your cake and eat it

From the above explanation, it’s easy to see the pros and cons of compile execution versus explain execution.

  • Compilation execution is slower to start, but faster to execute.

  • Explain that execution starts faster, but execution is slower.

Back to the subject, what is the way our V8 engine handles JavaScript?

Mo panic mo panic, to the point, first listen to a net suppression cloud to ease the heavy mood of the recent stock market crash.

V8 Execution process -JIT (Just In Time) technology

V8 uses a tradeoff between compile execution and explain execution. Perfect!

Let’s start with a flow chart of the current V8 implementation of JavaScript.

Here is the working flow of V8 based on the above figure (explained later) :

  • Generate AST and scope based on high-level language

  • Bytecode generation based on AST and scope

  • Explains the execution of bytecode

  • Monitor hot code (code that is used repeatedly in a project)

  • Compile hot code into binary machine code

  • If the hotspot code changes, you need to de-tune it

V8 will first receive the JavaScript source code that needs to be executed, but this is nothing more than a string in V8’s view, and V8 cannot directly understand the meaning of your if else.

So we need to process and transform this string.

After V8 processes and structures the source code, the abstract syntax tree (AST) is generated so that V8 can understand the meaning of the source code.

AST is divided into two stages: word segmentation (lexical analysis) and then interpretation (grammatical analysis).

AST is planned to publish a special article later, so I will not expand on it here. Back again, back!!

With the AST, V8 can generate the execution context for this code.

Execution context is also covered in a separate article. Execution context can include scope, scope chain, closure, this, etc.

I have seen many interview partners, many JavaScript foundation can say, but can not quite complete string together.

With the AST and the execution context, it’s the interpreter’s turn to generate bytecode from the AST and then interpret and execute bytecode.

In the V8 flowchart above, there is a Hot area, which is actually a module that monitors the interpreter’s execution status. When the interpreter executes bytecode, if some code is detected to be executed repeatedly, the module will mark this part of code as Hot code.

When a section of code is highlighted, V8 passes the bytecode to the optimized compiler, which compiles the bytecode to binary in the background. If this part of the code is executed later, V8 will preferentially select the compiled binary, which will greatly speed up the code execution. This is just-in-time compilation (JIT) technology.

However, as we all know, JavaScript is a dynamic language, and objects can be modified at run time, but the code compiled by the optimized compiler is only for a fixed structure. Once the structure of the object is modified dynamically, the part of the compiled optimized code needs to be de-optimized, otherwise it is invalid code. De-optimized code falls back to the interpreter to explain execution the next time it is executed.

Where else has JIT technology been used besides V8?

Warm boy weirdo gives you a rundown, and this:

  • Famous JVM and Luajit
  • The Oracle GraaIVM
  • Apple SquirrelFish differs Extreme
  • Mozilla SpiderMonkey
  • Wait (what else do you know, leave a comment)

In a discussion with colleagues last week, I was asked a question that the longer V8 is implemented, the more hot code is compiled into machine code and the more efficient the overall execution will be. If this is the case, then V8 memory usage is also increasing, how does V8 take this into account? (As if interviewed by a colleague)

In short, V8’s introduction of bytecode gives it a relatively flexible space to adjust between memory and execution speed. There is no room for flexibility compared to compiling all JS code directly into bytecode (which was what V8 did in the early days, and then the current structure due to memory problems caused by the rise of mobile)!

conclusion

This article has included making https://github.com/ponkans/F2E (a big monster is finishing the front-end knowledge skill tree), welcome to Star, continuously updated 💧

Sharing the V8 implementation process is oddly important for us to understand the nature of the front-end application.

Also hope that friends attach importance to the computer foundation, based on theory to combat than blind combat harvest will be greater, a lot of things are not ok to remember, or to understand the essence, is really belong to your own things.

Like the small partner to add a concern, a praise oh, Thanksgiving 💕😊

Contact me/public number

Wechat search “water monster” or scan the qr code below reply “add group”, I will pull you into the technical communication group. Honestly, in this group, even if you don’t talk, just reading the chat is a kind of growth. (Ali technical experts, aobing authors, Java3y, mogujie senior front end, Ant Financial security experts, all the big names).

The water monster will also be regular original, regular with small partners to exchange experience or help read the resume. Add attention, don’t get lost, have a chance to run together 🏃 ↓↓↓