Understanding JavaScript Execution: V8 Compilation, Scopes, Event Loop, and Performance Optimizations

This chapter introduces the V8 engine’s compilation and parsing principles, the basic JavaScript execution process, and several common optimization methods, enabling readers to write more elegant and efficient code while quickly solving development problems.

1. JavaScript Code Compilation and Parsing Process

In V8, JavaScript compilation consists of three stages: the parser generates an Abstract Syntax Tree (AST); the Ignition baseline compiler turns the AST into bytecode and interprets it; the TurboFan optimizing compiler converts hot bytecode into highly optimized machine code.

V8 also employs lazy parsing to avoid fully parsing functions that are not immediately needed, and uses pre‑parsing to quickly check syntax without building full scopes.

2. From AST to Bytecode

Ignition produces platform‑independent bytecode, which is then executed by an interpreter. When a function becomes hot, TurboFan recompiles its bytecode into optimized machine code. Type feedback allows V8 to assume stable argument types and generate faster code, while de‑optimization occurs when type assumptions change.

function addTwo(a, b) {
  return a + b;
}
addTwo(2, 3);               // 5
addTwo(8.6, 2.2);           // 10.8
addTwo("hello ", "world"); // "hello world"
addTwo("true or ", false); // "true or false"
// many other combinations...

The example above demonstrates how different operand types affect the generated code. V8’s type feedback optimizes repeated calls with the same types and de‑optimizes when a different type appears.

// example2.js
function addTwo(a, b) {
  return a + b;
}
for (let j = 0; j < 100000; j++) {
  if (j < 80000) {
    addTwo(10, 10);
  } else {
    addTwo('hello', 'world');
  }
}
d8 --trace-opt --trace-deopt example2.js
[marking 0x2ecfb2a5f229
for optimized recompilation, reason: hot and stable]
[compiling method 0x2ecfb2a5f229
using TurboFan OSR]
[deoptimizing (DEOPT soft): begin 0x2ecfb2a5f229
...]

Running the script shows that after the 80,001st execution the type change from numbers to strings triggers a de‑optimization, which is costly and should be avoided.

3. JavaScript Execution Flow

Key concepts include scope, lexical scope, block scope, scope chain, call stack, heap, execution context, closures, garbage collection, variable hoisting, and the this keyword.

Example of variable hoisting and call‑stack behavior:

var myOtherVar = 10
function a() {
  console.log('myVar', myVar)
  b()
}
function b() {
  console.log('myOtherVar', myOtherVar)
  c()
}
function c() {
  console.log('Hello world!')
}
a()
var myVar = 5

Output:

"myVar" undefined
"myOtherVar" 10
"Hello world!"

The execution creates a global context, then a new context for each function call, which is pushed onto the call stack and popped after execution.

4. Scope and Scope Chain

Variables declared inside functions are not visible outside; the scope chain resolves identifiers by looking up the outer lexical environment.

function a() {
  var myOtherVar = 'inside A'
  b()
}
function b() {
  var myVar = 'inside B'
  console.log('myOtherVar:', myOtherVar)
  function c() {
    console.log('myVar:', myVar)
  }
  c()
}
var myOtherVar = 'global otherVar'
var myVar = 'global myVar'
a()

Output:

myOtherVar: "global otherVar"
myVar: "inside B"

Block scope created with let and const behaves similarly to function scope, while var is function‑scoped.

function blockScope() {
  let a = 5
  {
    const blockedVar = 'blocked'
    var b = 11
    a = 9000
  }
  console.log('a =', a)
  console.log('b =', b)
  console.log('blockedVar =', blockedVar) // ReferenceError
}
blockScope()

Result:

a = 9000
b = 11
ReferenceError: blockedVar is not defined

5. Event Loop

JavaScript runs on a single thread; synchronous tasks execute on the call stack, while asynchronous tasks are placed in the task queue. When the stack is empty, the event loop pulls events from the queue and executes their callbacks.

var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {};
req.onerror = function() {};
req.send();

Because the request is asynchronous, the callback functions are executed only after the main script finishes and the event loop processes the task queue.

function logMessage2() {
  console.log('Message 2')
}
console.log('Message 1')
setTimeout(logMessage2, 1000)
console.log('Message 3')

Output order: Message 1, Message 3, Message 2.

6. JavaScript Performance Optimization

Avoid large inline scripts and heavy parsing on the main thread.

Split large JavaScript files into smaller chunks to improve parallel loading.

Prefer JSON parsing over object literals when possible, as it is faster.

Maximize code caching by using IIFE heuristics and avoiding frequent script updates.

Consider WebAssembly for compute‑heavy workloads, but use it alongside JavaScript.

By focusing on reducing main‑thread work, optimizing script size, and leveraging caching, developers can significantly improve JavaScript performance in modern browsers.