🖥️ 核心概念：浏览器工作原理 (Browser Internals)
🔎 核心定义
从 URL 到像素
浏览器工作原理 描述了浏览器如何将网络资源（HTML/CSS/JS）转换为用户屏幕上可视化的图像。
核心公式：
资源获取 (Network)+构建对象模型 (Parse)+布局与绘制 (Render)=页面 (View)
🏗️ 宏观架构：Chrome 多进程模型 (Multi-Process)
现代浏览器（如 Chrome）不仅仅是一个程序，而是一个操作系统。
参见：「浏览器工作原理」写给女友的秘籍-浏览器组成&网络请求篇（1.2W字)想要成为一名合格的前端工程师，掌握相关浏览器的工作 - 掘金
| 进程 (Process) | 核心职责 | 备注 |
|---|---|---|
| Browser Process (主进程) | 负责界面显示、用户交互、子进程管理 | 浏览器的 ” 总管 “ |
| Renderer Process (渲染进程) | 核心！ 将 HTML/CSS/JS 转换为网页 | 每个 Tab 一个独立进程 (Site Isolation) |
| GPU Process | 负责 GPU 加速、3D 绘制、网页合成 | 只有一个，全浏览器共享 |
| Network Process | 负责网络资源加载 (DNS/TCP/HTTP) | 独立于渲染进程 |
| Plugin Process | 负责运行插件 (Flash 等) | 易崩溃，故隔离 |
面试考点
为什么 Chrome 要用多进程？
- 稳定性：一个 Tab 崩了，不会导致整个浏览器崩溃。
- 安全性：沙箱机制 (Sandbox) 隔离，防止恶意网站通过渲染进程入侵系统。
- 流畅性：JS 阻塞渲染进程时，不会影响浏览器主界面的响应。
🔄 微观流程：关键渲染路径 (Critical Rendering Path)
这是前端性能优化的理论基石。当渲染进程拿到 HTML 数据后，会经历以下步骤：
graph TD 节点定义 HTML[HTML 文本]:::commonNode CSS[CSS 文本]:::commonNode DOM["构建 DOM 树<br>(Document Object Model)"]:::commonNode CSSOM["构建 CSSOM 树<br>(CSS Object Model)"]:::commonNode RenderTree["🌲 生成渲染树<br>(Render Tree)"]:::highlightNode Layout["📐 布局 (Layout/Reflow)<br>计算位置与大小"]:::commonNode Paint["🎨 绘制 (Paint/Repaint)<br>填充像素"]:::commonNode Composite["📑 合成 (Composite)<br>图层合并"]:::commonNode Display((📺 屏幕显示)):::commonNode %% 流程连接 HTML --> DOM CSS --> CSSOM DOM --> RenderTree CSSOM --> RenderTree RenderTree --> Layout Layout --> Paint Paint --> Composite Composite --> Display
关键环节解析
- 构建 DOM：HTML 解析器将字节流转换为 Token，再构建为 DOM 树。(注意：遇到
<script>会阻塞)。 - 构建 CSSOM：解析 CSS，计算样式规则。(注意：CSS 会阻塞渲染树的生成)。
- 生成渲染树：DOM + CSSOM = Render Tree。注意：
display: none的元素不会出现在渲染树中，但visibility: hidden会。 - 布局 (Layout)：计算每个节点在屏幕上的确切坐标和大小（类似于画图纸）。
- 绘制 (Paint)：将布局好的元素填充颜色、边框、阴影（类似于涂色）。
- 合成 (Composite)：将不同的图层（Layer）在 GPU 中进行合并，最终显示。
⚡ 核心线程与互斥 (Threads)
渲染进程（Renderer Process）内部是多线程的，最重要的是：
- GUI 渲染线程：负责布局、绘制。
- JS 引擎线程 (V8)：负责执行 JavaScript。
互斥机制 (The Mutex)
GUI 线程与 JS 线程是互斥的！
因为 JS 可以操作 DOM，如果两者同时运行，会导致渲染结果不可预期。
- 后果：当 JS 执行时间过长（长任务），页面渲染就会卡顿（掉帧）。
⚠️ 性能优化的核心：回流与重绘
这是浏览器原理在开发中最直接的应用场景。参见 重绘与回流。
| 概念 | 英文 | 触发条件 | 成本 | 例子 |
|---|---|---|---|---|
| 回流 | Reflow / Layout | 元素的几何属性发生变化 (宽/高/位置) | 🔥 非常高 (牵一发而动全身) | width, margin, fontSize, 窗口 resize |
| 重绘 | Repaint | 元素的外观发生变化，但几何不变 | ⚠️ 中等 | color, background, visibility |
优化原则：尽量使用
transform和opacity做动画，因为它们可以触发 GPU 硬件加速，跳过 Layout 和 Paint 阶段，直接进入 Composite 阶段。
📥 自检清单 (Checklist)
- 面试题：从输入 URL 到页面展示发生了什么？(网络阶段 + 渲染阶段) ✅ 2025-12-26
- 面试题：为什么
<script>标签通常放在<body>底部？(防止阻塞 DOM 构建) ✅ 2025-12-26 - 面试题：
async和defer脚本的区别是什么？ - 进阶：了解 Layer 模型，什么样的 CSS 属性会创建新的合成层 (Compositing Layer)？(如
will-change,video,z-index高级应用)。
📚 参考资料
- 浏览器渲染流程
- V8引擎工作原理
- Google Developers: Inside look at modern web browser