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.
Filter/Tag
#internals
24 entries
-
-
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.
-
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.
-
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.
-
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.
-
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.
-
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ò.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
Docker chuyên sâu · Part 11 — Container Internals: OCI, Namespaces, Cgroups & PID 1
Đi từ docker run xuống OCI, containerd, runc, namespaces, cgroups v2, copy-on-write, PID 1 và rootless bằng các lab quan sát trực tiếp.
-
Browser Rendering Pipeline — from HTML bytes to composited pixels
Parse, layout, paint, composite: critical path, main-thread contention, reflow thrashing, layer promotion, and engine changes in Blink, Gecko, and WebKit.