浏览器内核与引擎

问题

浏览器内核包含哪些部分？渲染引擎和 JS 引擎分别做什么？

解答

浏览器内核由两部分组成：渲染引擎和 JS 引擎。

渲染引擎

负责解析 HTML 和 CSS，将页面内容渲染到屏幕上。

工作流程：

HTML → DOM 树
              ↘
                渲染树 → 布局 → 绘制 → 显示
              ↗
CSS → CSSOM 树

1. 解析 HTML，构建 DOM 树
2. 解析 CSS，构建 CSSOM 树
3. 合并 DOM 和 CSSOM，生成渲染树
4. 布局（Layout）：计算元素位置和大小
5. 绘制（Paint）：将像素绘制到屏幕

JS 引擎

负责解析和执行 JavaScript 代码。

执行过程：

1. 词法分析：代码拆分成 token
2. 语法分析：生成 AST（抽象语法树）
3. 编译执行：解释执行或 JIT 编译

主流浏览器内核

浏览器	渲染引擎	JS 引擎
Chrome	Blink	V8
Firefox	Gecko	SpiderMonkey
Safari	WebKit	JavaScriptCore
Edge	Blink	V8

为什么要分离

早期渲染引擎和 JS 引擎是耦合的。分离后：

• JS 引擎可独立优化（V8 被用于 Node.js）
• 渲染引擎专注页面渲染性能
• 便于各自迭代升级

关键点

• 渲染引擎负责 HTML/CSS 解析和页面绘制，JS 引擎负责执行 JavaScript
• 渲染流程：DOM → CSSOM → 渲染树 → 布局 → 绘制
• Chrome 用 Blink + V8，Safari 用 WebKit + JavaScriptCore
• V8 使用 JIT（即时编译）提升执行性能
• 两个引擎分离便于独立优化和复用