I believe this is what you need to know about the JS operating mechanism and the internals of the JS engine (V8)

Preface

A few days ago, I began to want to write articles about the browser behind the front-end ecology. In fact, it is the integration of fragmentary knowledge. I hope to bring you an understanding of 0-1 instead of modules. Another original intention is as a front-end perspective to understand what the browser content. (Many people want to take a closer look at the WebKit source code. The V8 source code personally feels a bit outrageous and not suitable for every front-end student to practice it will make you feel desperate)

I hope you can correct my problem in the process of reading it carefully. Come slap me in the face!

Today comes to the content related to the module JS engine that everyone comes into contact with most daily; the content of this article includes:

1. JavaScript operating mechanism
2. Take a brief look at the engine interior

Terminology concepts (familiar skips, familiar memories, and those who don’t understand will be useful after carefully reading the follow-up)

1. The smallest unit of process cpu resource allocation ( process can contain multiple processes this may temporarily not need to understand )
2. Thread thread is the smallest unit of cpu scheduling
3. ECS: Execution Context Stack, Execution Context Stack

---

JavaScript operating mechanism

Overview

• JS is a single-threaded scripting language
• The main reason why JS is designed as a single-threaded language is because it is related to its purpose. As a browser scripting language, the main purpose of JS is to manipulate the DOM. If you design multithreading, it will inevitably bring about operation conflicts and cause complicated synchronization problems;
• In order to solve the problem of single-threaded queuing; there has been a headache-making operating mechanism including main thread, task queue, and event-loop.

In order to better understand the Event Loop, please see the figure below

In the above figure, when the main thread is running, a heap and a stack are generated. The code in the stack calls various external APIs, and they add various events (onClick, onLoad) to the "task queue". As long as the code in the stack is executed, the main thread will read the "task queue" and execute the callback functions corresponding to those events in turn.
executes the code in the stack and is always executed before reading the "task queue".

Main thread (execution stack)

execution context stack (execution context stack) is a thread for JavaScript to execute event tasks.

Please see the gif below:

1. When a function is called in the global code, the program will enter the called function, create a new execution context, and push the newly created context to the top of the execution stack.
2. Calling other functions inside the calling function will repeat the first step (the program enters the calling function, creates a new execution context and pushes it to the top of the execution stack)
3. Sequential execution starts from the top of the stack: Execute the execution context at the top of the stack. Once the execution of the current context function ends, it will be popped from the top of the stack, and the context control will be transferred to the current stack; continue execution until the stack is empty.

Task queue

task queue (task queue) is to store the results of asynchronous tasks, one is synchronous tasks (synchronous), the other is asynchronous tasks (asynchronous):

1. Synchronous tasks refer to tasks queued for execution on the main thread, and only the previous task can be executed before the next task is executed.
2. Asynchronous tasks refer to tasks that enter the task queue directly, wait for the conditions to be met (notify), and finally enter the main thread for execution.

Please see the gif below:


studied C++ knows that main is the main entrance. It doesn’t matter if you don’t understand, the main function can be ignored here) ~~

1. Enter the global execution context
2. console.log("start");Enter the main thread (push to the top of the stack)
3. When Timer1 enters the main thread during execution, it is found that WEBapi waits for the timeout time to complete and enters the queue
4. Timer2 enters the main thread during execution and found that it is WEBapi. Wait for the timeout time to complete and enter the queue

5. console.log("end); enter the main thread for execution

   The order of execution is 2-5-4-3

Event Loop

event-loop can be understood as a processing mechanism.
Main thread task execution == The main thread reads events from the "task queue" == execute..., this is a cyclic process. This operating mechanism is called Event Loop (Event Loop)

above animation to simply understand that when the main thread is empty, the events to be executed (timer1, timer2) are read from the task queue and enter the main thread for execution.

Overview of JS engine (V8)

A JavaScript engine is a program or an interpreter that executes JavaScript code. A JavaScript engine can be implemented as a standalone interpreter or a just-in-time compiler that compiles JavaScript into bytecode in some way.

Commonly said JavaScript engine:

1. JavaScriptCore stands for browser Safari
2. Rhino stands for browser Mozilla Firefox
3. Chakra stands for Internet Explorer (IE)
4. V8 represents the browser Chrome open source,

Here are some internal implementations and advantages of V8.

JS executes internal processes

1. JS code is converted to AST syntax tree representation.

// 函数
 function greet() {
   console.log("wlove");
 }
 // AST树 json
 {"type":"Program","start":0,"end":47,"body":[{"type":"FunctionDeclaration","start":0,"end":46,"id":{"type":"Identifier","start":9,"end":14,"name":"greet"},"expression":false,"generator":false,"async":false,"params":[],"body":{"type":"BlockStatement","start":17,"end":46,"body":[{"type":"ExpressionStatement","start":23,"end":44,"expression":{"type":"CallExpression","start":23,"end":43,"callee":{"type":"MemberExpression","start":23,"end":34,"object":{"type":"Identifier","start":23,"end":30,"name":"console"},"property":{"type":"Identifier","start":31,"end":34,"name":"log"},"computed":false,"optional":false},"arguments":[{"type":"Literal","start":35,"end":42,"value":"wlove","raw":"\"wlove\""}],"optional":false}}]}}],"sourceType":"module"}

2. AST to bytecode
Those who are familiar with it should know that the previous V8 directly converts the machine code. But the machine code takes up a lot of space. If the v8 caching mechanism compiles all js code into machine code and caches it, this will cause the cache to occupy a large amount of memory and disk space. And when you exit Chrome and open it again, serialization and deserialization cache time costs are also high.
Bytecode is introduced when the cost of time and space is very high.

3. TurboFan is also a lot of work inside the bytecode interpreter 060b594addc10a. Simply list a few:

   1. Bytecode handler generation
   2. Bytecode generation
   3. Interpreter register allocation
   4. Context chain
   5. Exception handling
   6. JS code interpretation and execution
   7. ....
4. JIT (Just In Time) is a technology that mixes compiler and interpreter. The compiler starts slowly and executes quickly. The start-up speed of the interpreter is fast, but the execution speed is slow. The JIT technology is the combination of the two ( Ignition (bytecode interpreter) + TurboFan (JIT compiler); the latter application is also more and more extensive)

5. Virtual machine (garbage collection, memory management, etc.)

V8 uses generational and large data memory allocation. When reclaiming memory, it uses a streamlined algorithm to mark unreferenced objects, then eliminate unmarked objects, and finally sort and compress those unsaved objects to complete garbage collection. .
memory allocation:

   • Young generations: Allocate memory space for newly created objects, which often requires garbage collection. In order to facilitate the content collection in the young generation, the young generation can be divided into two halves, one half is used for allocation, and the other half is responsible for copying the objects that need to be retained before the collection.

• Old age generation: save old objects, pointers, codes and other data as needed, and less garbage collection.

• Large objects: Allocate memory for objects that need to use more memory. Of course, they may also include memory allocated for data and code. Only one object is allocated per page.

  Memory (garbage) collection:

  1. Object garbage collection in the young generation is mainly garbage collected through the Scavenge algorithm.
  2. Considering that most of the surviving objects in the old generations are considered, the method of Mark-Sweep (mark sweep) and Mark-Compact (mark sorting) is mainly used for garbage collection.

6. Code execution

Compile and run the work process

V8 engine compilation stage:

The main classes are as follows:

1. Script : Script class contains JS code, and compiled native code. (Here is the compilation entry)
2. Compiler : Compiler class: Script class calls to compile and generate code including generating AST, native code, etc.
3. AstNode : Abstract syntax tree node class (as a node base class, it contains many subclasses to assist in the subsequent generation of code)
4. AstVisitor : Abstract syntax tree access class, mainly used to traverse heterogeneous abstract syntax trees;
5. FullCodeGenerator : The access class can be used to traverse the AST to generate local executable code for JS.


The compilation process is approximately:

1. The Script class calls the Compiler class to generate AST and native code for it.
2. The Compile function first uses the Parser class to generate AST, and then uses the FullCodeGenerator class to generate native code.
3. FullCodeGenerator uses multiple backends to generate native assembly code that matches the platform.

V8 engine operation stage:

The main classes are as follows:

1. Script here is the native code generated after running the entry compilation;
2. Execution : auxiliary group of classes during JS running; contains some functions such as call function;
3. JSFunction : JavaScript function representation class that needs to be executed;
4. Runtime : Auxiliary class for running these native codes, mainly providing auxiliary functions required at runtime, such as: attribute access, type conversion, compilation, arithmetic, bit manipulation, comparison, regular expressions, etc.;
5. Heap : The memory heap class needed to run native code;
6. MarkCompactCollector : The main implementation class of the garbage collection mechanism, used to mark, clear, and organize basic garbage collection processes;
7. SweeperThread : The thread responsible for garbage collection.


The execution process is roughly:

1. V8 When the function is called, it will detect whether there is native code if it is called.
2. V8 When the function is called, it will detect whether it is local code. If not, it will generate local code.
3. Executing the compiled code to build the JS object requires the Runtime class to assist in the creation of the object, and needs to allocate memory from the Heap class.
4. Finally, the unused space is marked and cleared and garbage collected.

Of course, there are many hidden classes, extension mechanisms, etc. inside V8. If you are interested, you can take a look at "WebKit Technology Insider". If you want to read the source code, it is recommended to start reading which has a small amount of code. Come on boy.

At last

Share recently: work is very busy and busy (connecting with external resources, integrating internal resources, doing technology exploration and research and development...); life is very busy and busy (one thing is that you must persist in sports...) and then writing will also persist (1-3 articles per week). If you have any content you want to know, feel free to leave a message as long as I know it and I will share it immediately to help you. If I don’t know, I can learn it. Hehe

next article is to be determined. Come on, the future looks like a beautiful young girl! ! !

The source of the above picture is part of the network infringement, please contact to delete.