What Are the Stages of the JavaScript Execution Process? - 面试题

The JavaScript execution process can be broadly divided into the following stages:

1. Parsing

In this stage, the JavaScript engine reads the source code and parses it into an Abstract Syntax Tree (AST). An AST is a hierarchical, structured representation of code that expresses each statement, expression, and other elements in a tree structure. During parsing, if a syntax error is encountered, an error is thrown, and execution stops.

2. Compilation

JavaScript engines, such as V8, typically perform Just-In-Time (JIT) compilation on the parsed code. The compiler first generates bytecode, a low-level intermediate representation closer to machine code than the source code. Subsequently, based on the program's execution, the compiler may compile hot code (frequently executed code) into optimized machine code to improve efficiency.

3. Execution

The generated bytecode or machine code is executed within the JavaScript engine's execution environment. During execution, the following sub-stages are entered:

Creating Execution Context: First, the global execution context is created, and a new execution context is created for each function call. The execution context includes the variable object, scope chain, and this reference.
Variable Hoisting: Before executing the code, function declarations and variable declarations are hoisted to the top of their respective execution contexts. Variables are initialized to undefined, while functions are fully hoisted.
Executing Code: The code is executed line by line according to the execution context, performing variable assignments, function calls, etc.
Garbage Collection: During execution, the engine manages memory, automatically releasing memory spaces no longer needed.

4. Optimization

During code execution, certain code may be executed multiple times, and the engine attempts to optimize these frequently executed sections. For example, in the V8 engine, the 'TurboFan' optimizer adjusts code based on execution characteristics to improve performance. If optimization assumptions fail (i.e., deoptimization occurs), the engine reverts the code to a less optimized version.

5. Deoptimization & Garbage Collection

For data and optimizations no longer needed, the JavaScript engine performs deoptimization and garbage collection to ensure efficient memory usage.

Example:

Suppose we have a simple JavaScript function:

javascript
function sum(a, b) {
  return a + b;
}

let result = sum(5, 3);

First, the function is parsed into an AST. Then, it may be compiled into bytecode. When calling sum(5, 3), a new execution context is created, containing the parameters a and b and any local variables. In this context, a and b are assigned the values 5 and 3, the function executes, and returns the result 8. This process may also include optimizations for the sum function if it is frequently called. Finally, when the execution context leaves the scope, if no other references point to the data, the garbage collector will eventually clean up these objects.