Browser Fundamentals: Process Architecture, V8 Engine, Memory Management, Event Loop, Rendering, and Security

Browser Basics

Process Architecture

Process is the smallest unit of OS resource allocation, while Thread is the smallest unit of CPU scheduling.

A process is an instance of a program; when a program starts, the OS creates a memory region containing the code segment, data segment, and a Process Control Block (PCB).

The code segment stores program code; the data segment stores global and local variables; the PCB holds identifiers, CPU state, scheduling, and control information.

Any thread error in a process crashes the whole process.

Threads share the process's data.

When a process exits, the OS reclaims its memory.

Processes are isolated; inter‑process communication requires IPC mechanisms.

Single‑Process Browser

A single‑process browser runs networking, plugins, JavaScript, rendering engine, and pages in the same process, which historically caused instability, sluggishness, and security risks.

Instability: a crash in any module brings down the whole browser.

Sluggishness: all modules share one thread, so only one can execute at a time; memory leaks also cause jank.

Security: plugins written in C/C++ can access any OS resource, potentially stealing data or executing malicious code.

Multi‑Process Browser

Modern browsers (e.g., Chrome) separate functionality into distinct processes: a browser (UI) process, rendering processes, plugin processes, and a GPU process.

Browser main process : handles address bar, bookmarks, navigation, and privileged tasks such as network requests and file access.

Rendering process : renders web content except the tab bar.

Plugin process : runs plugins like Flash.

GPU process : handles GPU tasks independently.

Process isolation ensures that a crash or malicious activity in one tab does not affect others, and sandboxing limits the impact of compromised code.

Network Requests

The flow from URL input to page display involves multiple processes: UI thread forwards the URL to the network thread, which initiates the request, receives response headers, and passes data back to the browser process, which then commits navigation to the rendering process.

V8 Engine Basics

Data Types

Type

Description

Category

boolean

Only true or false

Primitive

undefined

Default value for uninitialized variables

Primitive

number

IEEE‑754 double‑precision floating‑point

Primitive

string

Immutable text data

Primitive

bigint

Arbitrary‑size integers

Primitive

symbol

Unique, immutable identifiers

Primitive

object

Collection of properties, includes null

Reference

function

Reusable code blocks

Reference

Safe Numbers

JavaScript numbers follow the IEEE‑754 standard; Number.MAX_VALUE is the largest normalized floating‑point value, Number.MIN_VALUE is the smallest positive subnormal value, and Number.EPSILON represents the difference between 1 and the smallest value greater than 1.

0.1 + 0.2 === 0.3 // false – result is 0.30000000000000004
18.366667 - 16.466667 === 1.9 // false – result is 1.8999999999999986

Property Order

Before ES6, property enumeration order depended on engine implementation. Since ES6, [[OwnPropertyKeys]] defines a deterministic order: numeric keys in ascending order, then string keys in creation order, followed by symbol keys.

Methods such as Object.keys and Reflect.ownKeys follow this order, while for...in and Object.getOwnPropertyNames may still reflect engine‑specific ordering.

const data = { a:0, c:1, b:2, "1":3, 0:4, [Symbol.for(1)]:5, "2":6, "-1":7, [Symbol.for(0)]:8 };
// Object.keys → ['0','1','2','a','c','b','-1']
// Reflect.ownKeys → ['0','1','2','a','c','b','-1',Symbol(1),Symbol(0)]

Object Properties in V8

V8 classifies properties as numeric (sorted) and string (named). Objects have in‑object properties for fast access when the number of named properties is ≤ 9; beyond that, properties are stored in a separate structure. When named properties reach 25, V8 switches from fast to slow property layout.

function Foo(){
  for(let i=0;i<20;i++){
    this[`${i}`] = `property-${i}`;
  }
}

Memory Allocation

Primitive values reside on the stack; reference values are allocated on the heap. Assigning primitives copies the value, while assigning references copies the address.

const foo = () => {
  const a = 'JIMU';
  const b = a; // copy of primitive
  const c = { team: 'JnQ' };
  const d = c; // copy of reference
};
foo();

Memory Management

V8 uses two garbage‑collection strategies: Major GC (Mark‑Sweep & Mark‑Compact) for the old generation, and Minor GC (Scavenger) for the new generation. The new space is split into two semi‑spaces that copy live objects during scavenging.

New space : frequent, fast copying collection.

Old space : less frequent, larger objects, includes pointer and data regions.

Large object space : stores oversized objects, not moved by GC.

Code space : holds executable code with execution permissions.

Map space : stores hidden class maps.

V8 assumes objects are immutable after creation (no new or deleted properties). It creates a hidden class (map) that records property layout and offsets, enabling fast property access via offset lookup.

// Reusing the same hidden class
const JnQ = { name: 'JnQ', owner: 'Qi Huang', TL: 'Sijie Cai' };
const TCSplus = { name: 'TCS', owner: 'Guangyu Song', TL: 'Sijie Cai' };

// Creating a new hidden class each time a property is added
const JnQInfo = {};
JnQInfo.platform = ['Jimu','Juren','Rock'];
JnQInfo.member = 13;
JnQInfo.meeting = 'Friday';

Compilation and Execution

V8 combines an interpreter ( Ignition ) and a optimizing compiler ( TurboFan ), with a newer middle‑tier compiler ( Maglev ). Ignition generates bytecode from the AST; hot code is later compiled to machine code by TurboFan.

const foo = (day) => {
  const department = 'Data-TnS-FE';
  const team = 'JnQ';
  return day % 2 === 0 ? department : team;
};
for(let day=0; day<0x20227; day++){
  foo(day);
}

Event Loop

Each rendering process has a main thread handling DOM, style, layout, JavaScript, and user interaction. An IO thread receives messages from other processes. Tasks are queued in macro‑task queues; each macro‑task has an associated micro‑task queue that runs after the macro‑task completes.

Macro‑tasks include timers, network callbacks, and UI events. Micro‑tasks include promises and MutationObserver callbacks. The WHATWG spec defines the event‑loop processing model.

Task Scheduling

Chrome separates immediate and delayed queues. Immediate tasks are placed in immediate_incoming_queue then moved to immediate_work_queue . Delayed tasks wait in delayed_incoming_queue until their timeout expires.

Timers

Timers have a minimum interval of 4 ms (1 s when the page is backgrounded) and a maximum of 2,147,483,647 ms (~24.8 days).

Page Rendering Pipeline

HTML parser builds the DOM tree.

CSS parser builds the CSSOM tree.

DOM + CSSOM are combined into a layout tree.

Specific nodes generate layers, forming a layer tree.

Paint step creates a list of drawing commands.

Rasterization converts layer tiles to bitmaps.

Composition assembles draw quads into frames, which Chromium Viz sends to the GPU for display.

Changes that affect geometry trigger reflow (layout), color changes trigger repaint, and CSS transforms trigger only composition, which is the cheapest.

Performance Optimization

Loading Phase

Critical resources (HTML, CSS, JavaScript) block first paint. Reduce the number and size of critical resources and minimize round‑trip times (RTT) to improve load speed.

Interaction Phase

Minimize JavaScript execution time, avoid forced synchronous layout, reduce layout thrashing, and limit frequent garbage‑collection pauses.

Browser Security

Page Security

Same‑origin policy enforces that only pages sharing protocol, host, and port can access each other's DOM, cookies, IndexedDB, LocalStorage, and can make cross‑origin XHR requests.

System Security

Browser architecture isolates rendering processes in sandboxes; rendering processes cannot directly access OS resources. All privileged operations (network, file I/O, cookies, cache) are performed by the browser (privileged) process via IPC.

Site Isolation

Chrome groups pages from the same site (same eTLD+1) into a single renderer process, preventing cross‑site iframes from sharing a process and mitigating Spectre/Meltdown attacks.

Network Security

HTTPS uses a combination of symmetric and asymmetric encryption. The client sends a list of supported cipher suites and a random nonce; the server selects a suite, sends its certificate and public key, and both sides derive a shared secret for encrypted communication. Digital certificates issued by trusted CAs authenticate server identity and provide the public key.

References are listed at the end of the original document.