从 WebKit 看浏览器内核架构

浏览器常见的浏览器内核有：Blink、WebKit、Gecko、Trident 等，目前 WebKit 内核占据了非常大的的市场，包括 Chrome、Safari、安卓浏览器等市面上的主流浏览器，都使用了 WebKit 内核。

---

从 WebKit 看浏览器内核架构

---

既然 WebKit 这么经典，我们就以它为例来看一下浏览器内核的架构。浏览器内核主要包含：HTML Parser，CSS Parser，Layout，JavaScript Engine 几部分，如下图所示：

我们简单看一下，上图中的几个关键部分承担了什么工作：

HTML Parser：HTML 解析器，负责 HTML 文本的解析，将 HTML 解析为可编程结构 —— DOM （文档对象模型）树；

CSS Parser：CSS 解析器是层叠样式的解析器，用来计算布局所需要的节点样式信息 —— CSSOM（样式）树；

Layout：布局，在 得到 DOM 树和 CSSOM 树后，需要计算出 DOM 树中可见元素的几何位置，生成布局树 —— Layout Tree；

JavaScript Engine：JavaScript 语言的解析引擎，执行页面的动态逻辑，并可以访问 DOM 和 CSSOM 数据接口；

操作系统支持 —— 移植：WebKit 代码中，因为其天生具有跨平台性质，所以部分平台相关的能力需要做跨平台兼容的移植。

上面是一个简略的浏览器内核的功能，不过它仅仅是完成了核心的渲染过程，实际上浏览器则要复杂得多。

此文章为5月Day22学习笔记，内容来源于极客时间《计算机基础实战课》