Series · 22 parts

How Browsers Work — Internals Deep Dive

Series tiếng Việt đi dưới lớp vỏ của browser — runtime mà frontend engineer ship code vào mỗi ngày nhưng hiếm khi hiểu trọn. Chặng nền tảng 1–12 bắt đầu từ kiến trúc đa process (browser, renderer, GPU, network, sandbox và site isolation), lần theo navigation từ URL tới pixel, rồi đào sâu HTML parser/DOM, CSSOM, render tree, layout, paint, compositing, V8, event loop, memory/GC, networking, storage và security model. Chặng chuyên sâu 13–22 nối mental model đó với GPU/Viz và layer promotion, scrolling, frame scheduling, các tier tối ưu/deopt của V8, heap leak và detached DOM, accessibility tree, pipeline decode ảnh/video, worker + SharedArrayBuffer/Atomics, process model + BFCache — kết bằng capstone profiling có hệ thống trong DevTools. Mỗi phần nối internals với code và triệu chứng bạn thật sự gặp.

01 How Browsers Work · Part 1 — Mental Model: The Multi-Process Architecture

Opening the series: the browser is not one program but many cooperating processes. Understand the browser/renderer/GPU/network split, sandboxing, site isolation, and the threads inside a renderer — the foundation for everything else.
02 How Browsers Work · Part 2 — From URL to Pixels

A bird's-eye walkthrough of everything that happens between pressing Enter and the first paint: URL parsing, DNS, TCP/TLS, the HTTP request, response handling, and handing bytes to the renderer.
03 How Browsers Work · Part 3 — HTML Parsing & the DOM

How the renderer turns a byte stream into the DOM tree: tokenization, tree construction, the preload scanner, why scripts block parsing, and how async/defer change the picture.
04 How Browsers Work · Part 4 — CSS & the CSSOM

How the browser parses CSS into the CSSOM, resolves origins, layers, specificity and scope, computes values, and builds the layout tree — including when stylesheets block rendering.
05 How Browsers Work · Part 5 — Layout, Paint & Compositing

The pixel pipeline: how styled DOM becomes layout geometry, paint records, raster tiles and compositor frames — why invalidation and animation cost depend on context.
06 How Browsers Work · Part 6 — The JavaScript Engine (V8)

Inside modern V8: parsing, Ignition bytecode, Sparkplug and Maglev tiering, TurboFan optimization, Maps, inline caches and evidence-based performance work.
07 How Browsers Work · Part 7 — The Event Loop, Tasks & Microtasks

The model that ties JS to rendering: task sources and queues, microtask checkpoints, promises, rAF, long tasks, and cooperative scheduling.
08 How Browsers Work · Part 8 — Memory & Garbage Collection

How browser memory is managed across V8 and Blink Oilpan: call frames, heaps, generational tracing GC, reachability, and practical leak diagnosis.
09 How Browsers Work · Part 9 — Networking & HTTP Caching

The network stack from the browser's side: the resource fetch lifecycle, HTTP caching (Cache-Control, ETag, the disk/memory cache), connection reuse, HTTP/2 and HTTP/3, and request prioritization.
10 How Browsers Work · Part 10 — Storage & the Platform

Where the web stores data: cookie scope, Web Storage, IndexedDB, Cache API and service workers — sync/async trade-offs, quotas, partitioning and lifecycle.
11 How Browsers Work · Part 11 — The Security Model

The browser's defenses: the same-origin policy, CORS, Content Security Policy, cookie protections (SameSite/HttpOnly), the sandbox and site isolation, and how they combine to contain hostile code.
12 How Browsers Work · Part 12 — Capstone 1: Debugging Performance Through Internals

Turn the foundational arc into a debugging superpower: read a DevTools Performance trace through processes, threads, the rendering pipeline and the event loop, then map symptoms to root causes.
13 How Browsers Work · Part 13 — GPU & the Compositor: Raster, Tiles & Layers

Đi sâu vào nửa sau pipeline render của Chromium: property trees/layers, tiling, software/GPU raster, compositor thread, Viz và fast path của transform/opacity.
14 How Browsers Work · Part 14 — Scrolling Internals

Vì sao cuộn thường mượt kể cả khi JS bận: compositor scrolling, main-thread scrolling, passive listeners, scroll anchoring, và cơ chế của scroll-linked effects.
15 How Browsers Work · Part 15 — Rendering Scheduling & the Frame Lifecycle

Browser tạo một frame như thế nào: cơ hội update rendering, rAF, style/layout, observers, paint và composite; cùng content-visibility, idle callback và Scheduler API.
16 How Browsers Work · Part 16 — V8 Deep: Optimization Tiers & Deopt

Bên trong máy ảo JS: Ignition, Sparkplug, Maglev, TurboFan, hidden class, inline cache, elements kind và deoptimization — cùng cách đọc chúng mà không tối ưu mò.
17 How Browsers Work · Part 17 — Memory Deep: Heap Snapshots, Leaks & Detached DOM

Điều tra rò rỉ bộ nhớ bằng heap snapshot, Comparison và retainer path; hiểu detached DOM, Oilpan/V8 GC, weak references và giới hạn của phép đo memory.
18 How Browsers Work · Part 18 — Accessibility Tree Internals

Accessibility tree được dẫn xuất từ DOM thế nào: role/name/state, thuật toán tính tên, ignored/inert nodes, API nền tảng và cách kiểm tra bằng DevTools/CDP.
19 How Browsers Work · Part 19 — Image & Media Decoding Pipeline

Ảnh đi từ byte tới pixel: fetch, decode đồng bộ/bất đồng bộ, raster/composite; cùng decoding="async", Image.decode(), createImageBitmap, OffscreenCanvas và video frames.
20 How Browsers Work · Part 20 — Threading Deep: Workers, SharedArrayBuffer & Atomics

Đa luồng thật trên web: Web Workers, transferable vs SharedArrayBuffer, Atomics để đồng bộ, và cross-origin isolation (COOP/COEP) mở khoá bộ nhớ chia sẻ cùng timer phân giải cao.
21 How Browsers Work · Part 21 — Process Model Deep: Site Isolation, BFCache & Prerender

Mô hình đa tiến trình ở mức sâu: Site Isolation và OOPIF, Back/Forward Cache, prerender và Speculation Rules, cùng Page Lifecycle API quản lý tài nguyên giữa các tab.
22 How Browsers Work · Part 22 — Capstone 2: Profiling Internals End-to-End

Ghép mọi tầng nội bộ lại: đọc Performance panel và Perfetto, khoanh vùng jank theo process/thread/giai đoạn pipeline, rồi kiểm chứng bằng một quy trình có hệ thống.