Before JS is executed, V8 prepares the runtime environment for the code, including heap space and stack space, global execution context, global scope, built-in builder functions, extension functions and objects provided by the host environment, message loop, and so on. With the runtime environment ready, V8 starts executing JS code: parsing source code, generating bytecode, interpreting execution, and compiling execution.

1. Host environment

Both the browser and Node.js are host environments for V8, and the browser provides V8 with the basic message loop, global variables, and Web apis. The core of V8 is to implement the ECMAScript standard, provide ECMAScript defined objects and core functions such as Object and function, V8 also provides garbage collector, coroutines and other basic content. Improper use of V8 can tie up main thread resources and cause the browser to freeze.

2. Construct data storage space: heap space and stack space

V8 creates both heap space and stack space during startup, and the data generated is stored in both Spaces.

The stack space is used to store native data and also to manage JS function calls. The stack structure is first and last out. The execution context of the function is destroyed when the function completes execution. The stack space lookup is very efficient, and it is difficult to find large contiguous Spaces in memory, so V8 limits the size of the stack space. If the function calls are too deep, V8 may throw stack overflow errors.

Heap space can be used for large memory or discrete data. Heap space can be used to store discrete data of object types. In addition to basic data in JS, other data such as functions, objects, and arrays are stored in the heap space.

3. Global execution context and global scope

After V8 initializes the base memory space, it next initializes the global execution context and global scope. V8 uses the execution context to maintain variable declarations needed to execute the current code, this pointing to, and so on.

Execution contexts include: variable context, lexical context, this keyword.

  • Variable environment: such as global functions, global window objects, etc.
  • Lexical context: let, variable content defined by const.
  • This keyword: global this point.

The global execution context is not destroyed for the lifetime of V8 and will remain cached in the heap. The global scope is static and the execution context is dynamic.

4. Build an event loop

With heap space and stack space, global scope and global execution context are generated, and V8 uses the event loop system to perform tasks. V8 uses the main thread provided by the host environment to loop calls listening for the next event. The simulation code is as follows:

while(1){
    Task task = GetNewTask();
    RunTask(task);
}
Copy the code

If V8 is processing a DOM operation and other operations are coming in, a message queue is introduced, pending events are temporarily stored in the message queue, and queued tasks are pulled from the message queue for execution when the current operation is complete. The event loop repeats this process until the task in the message queue is empty. Because V8 and the browser share the main thread and message queue, avoid V8 executing a function for too long.

5. To summarize

When V8 executes JS, part of the environment is provided by the browser or node.js host environment, including heap space and stack space, global execution context, global scope, event loop system. V8 also provides its own JS core functionality and garbage collection system.

During host environment startup, stack space stores native data and heap space stores object data. Use of stack space to avoid stack overflow.

Global objects such as the browser window and Node global are prepared during V8 startup and stored in the global execution context. The global execution context always exists, and the function execution context is destroyed after the function completes execution. So try not to put variables and data into global objects to avoid excessive memory.

The host environment also provides an event loop system to handle task sequencing and task scheduling.

6. Write in the back

A summary of V8 learning comes from geek Time teacher Li Bing’s course, Illustrated Ole V8. For more details, check out the course.