【读书笔记】--浏览器工作原理与实践（浏览器渲染流程）

整个过程大概分为以下几个流程：

建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成

一、构建DOM树

简单的说就是HTML经由HTML解析器解析，最终输出的树状结构，就是DOM树

二、样式计算

样式计算的目的是为了计算出DOM节点中每个元素的样式，大概有三个步骤

1）把CSS转换为计算机能够理解的结构（简单的说就是解析css）

css主要的来源有三个：通过link标签引入；<style>标签内的css；元素的style属性内嵌的样式

浏览器是无法直接理解css的，当渲染引擎接收到css文本，通过CSS解析器，吧css解析为浏览器可以理解的结构——styleSheets。

2）转换样式表中的属性值，使其标准化

将所有值转换为渲染引擎容易理解的、标准化的计算值，这就是标准化。

3）计算出DOM树中每个节点的具体样式

样式计算过程中，会根据DOM节点的继承关系来合理计算节点样式

CSS有两个原则：

（1）CSS继承就是每个DOM节点都包含有父节点的样式。

（2）层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。

样式计算的目的是计算出DOM节点中每个元素的具体样式，在计算过程中需要遵循继承和层叠两个规则。CSS计算最终输出的内容是DOM节点的样式，并保存在ComputedStyle的结构内。

三、布局阶段

知道了DOM树和DOM树中元素的样式，但是缺少DOM元素的几何位置。布