现代浏览器底层能力 (Low-Level Capabilities of Modern Browsers)

2026-02-10 暂无评论

[ABSTRACT] 导读 | Introduction
本笔记整理了现代浏览器在解析、渲染、网络、执行及系统能力方面的底层机制。
This note organizes the low-level mechanisms of modern browsers regarding parsing, rendering, networking, execution, and system capabilities.

🏗️ 1. 解析与构建 | Parsing & Construction

将代码转换为页面结构的过程 / The process of converting code into page structures.

🔹 HTML 解析 | HTML Parsing

输入与输出 | Input & Output
接收 HTML 文本，构建 DOM Tree。
Receives HTML text strings and constructs the DOM Tree (文档对象模型树).
流式解析 | Streaming Parsing
一旦收到网络包就开始解析，无需等待文件下载完。
Parsing begins upon receiving network packets, without waiting for the full download.
预加载扫描器 | Preload Scanner
后台线程提前扫描并请求 <img>, <link>, <script>。
A background thread scans for and initiates requests for resources early.

🔹 CSS 解析 | CSS Parsing

CSSOM 构建 | CSSOM Construction
将 CSS 解析为 CSSOM (CSS 对象模型)。
Parses CSS files into the CSSOM (CSS Object Model).
计算样式 | Computed Styles
结合 DOM 和 CSSOM 计算最终像素值（如 em → px）。
Combines DOM and CSSOM to calculate final styles (e.g., em to px).

[WARNING] JS 阻塞 | JS Blocking
遇到 <script> 时解析会暂停，因为 JS 可能修改 DOM。
Parsing pauses at <script> tags as JS might modify the DOM.
优化 | Optimization: async / defer

🎨 2. 渲染流水线 | Rendering Pipeline

从数据到像素的转化 / Converting data into screen pixels.

Code snippet

graph LR
  DOM & CSSOM --> Layout --> Paint --> Composite

布局 | Layout (Reflow)
计算节点的几何信息（x, y, width, height）。
Calculates geometric information for each visible node.
绘制 | Paint
确定绘制顺序和记录指令（如“先背景后文字”）。
Determines drawing order and records operation instructions.
合成与光栅化 | Compositing & Rasterization
- 分层 (Layering): 独立图层变换不触发主线程重排。
  Independent layers prevent main-thread reflow during transforms.
- 光栅化 (Rasterization): 将指令转为位图，由 GPU 加速。
  Converts instructions into bitmaps, accelerated by the GPU.

⚙️ 3. 执行与内存 | Execution & Memory

🚀 V8 引擎 | V8 Engine Mechanics

即时编译 (JIT): 源码 → AST → 字节码 → 机器码。
Source code → AST → Bytecode → Machine code.
主线程 | Main Thread: JS 执行与渲染共用，长任务会导致掉帧 (Jank)。
JS and rendering share the main thread; long tasks cause frame drops.

🧠 内存管理 | Memory Handling

堆与栈 | Heap & Stack: 堆存对象，栈存基本类型。
Heap for objects; stack for primitives and call frames.
垃圾回收 (GC): 采用增量标记 (Incremental Marking) 避免卡顿。
Uses Incremental Marking to prevent page freezing during GC.

🛡️ 4. 系统能力 | System Capabilities

📁 文件系统 | File System Access

File System Access API: 用户授权下直接读写本地文件。
Read/write local files with user permission.
源私有文件系统 (OPFS):
浏览器提供的私有、高性能存储，适合 SQLite Wasm。
Private, high-performance storage, ideal for SQLite Wasm.

⚡ 其他能力 | Other Capabilities

WebAssembly (Wasm): 近似原生的执行性能。
Near-native performance for compiled code.
Web Workers: 后台线程处理密集计算。
Background threads for intensive tasks.
OffscreenCanvas: 在 Worker 中处理图像绘制。
Handles image drawing within a Worker thread.