浏览器内核与引擎
渲染引擎和 JS 引擎的作用与工作原理
问题
浏览器内核包含哪些部分？渲染引擎和 JS 引擎分别做什么？
解答
浏览器内核由两部分组成：渲染引擎和 JS 引擎。
渲染引擎
负责解析 HTML 和 CSS，将页面内容渲染到屏幕上。
工作流程：
HTML → DOM 树
↘
渲染树 → 布局 → 绘制 → 显示
↗
CSS → CSSOM 树- 解析 HTML，构建 DOM 树
- 解析 CSS，构建 CSSOM 树
- 合并 DOM 和 CSSOM，生成渲染树
- 布局（Layout）：计算元素位置和大小
- 绘制（Paint）：将像素绘制到屏幕
JS 引擎
负责解析和执行 JavaScript 代码。
执行过程：
- 词法分析：代码拆分成 token
- 语法分析：生成 AST（抽象语法树）
- 编译执行：解释执行或 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（即时编译）提升执行性能
- 两个引擎分离便于独立优化和复用
目录