一、总体过程

二、五步

1. HTML → DOM树 （解析html）

DOM全称为文档对象模型Document Object Model，其中一个DOM节点对应一个标签，Dom树即表示了HTML的文档结构。转化过程如下图所示：

1. 解码：浏览器从磁盘或网络读取HTML的原始字节，然后根据指定的文件编码格式（例如 UTF-8）将其转换为相应字符
2. 令牌化：浏览器把字符转化成W3C HTML5 标准指定的各种确切的令牌，比如""、""以及其他在尖括号内的字符串。每个令牌都有特殊的含义以及它自己的一套规则
3. 词法分析：生成的令牌转化为对象，这个对象定义了它们的属性及规则
4. DOM树构建：最后，由于HTML标记定义了不同标签之间的关系（某些标签嵌套在其他标签中），创建的对象在树状的数据结构中互相链接，树状数据结构也捕获了原始标签定义的父子关系：HTML对象是body对象的父对象，body是p对象的父对象等等

2. CSS → CSSOM树（解析CSS样式）

CSSOM全称为CSS对象模型CSS Object Model，CSSOM告诉了浏览器元素在渲染时是什么样的。与HTML一样，我们需要将收到的 CSS 规则转换为浏览器可以理解、能够处理的东西。因此，我们重复与处理 HTML 非常相似的过程：

CSSOM只输出包含有样式的节点，最终输出为：

3. 生成渲染树Render Tree （计算可见节点和样式）

DOM描述的是文档结构，CSSOM描述的是文档的样式规则，构建这颗树的目的是为了以正确的顺序绘制文档内容，渲染树为：

它有下面的特点：

• 不包括Header 、 script 、meta 等不可见的节点
• 某些通过 CSS 隐藏的节点在渲染树中也会被忽略，比如应用了 display:none 规则的节点，而visibility: hidden只是视觉不可见，仍占据空间，不会被忽略。

4. （渲染）layout

依照盒子模型，计算出每个节点在屏幕中的位置及尺寸

5. （渲染）painting

按照算出来的规则，通过显卡，把内容画到屏幕上。

三、重新渲染

1. reflow重排 （即重新layout）

当可见节点位置及尺寸发生变化时会发生重排，具体为下面情况：

• 页面初始渲染
• 添加/删除可见DOM元素
• 改变元素位置
• 改变元素尺寸（宽宽、高、内外边距、边框等）
• 改变元素内容**（文本、html等）**
• 改变元素字体大小
• 改变窗口尺寸

不会发生重排的行为：

• 读取dom节点属性、内容、样式

2. repaint重绘 （即重新paint）

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

它是一个可见节点改变除位置和大小以外的外观所触发的浏览器行为，有下面几个特点：

• 重绘不一定导致重排
• 重排一定会导致重绘，因为重绘是浏览器渲染页面的最后一步

问题

问：浏览器在什么时候向服务器发送获取css、js外部文件的请求？

答：解析DOM时碰到外部链接，如果还有connection，则立刻触发下载请求。

问：CSSOM DOM JavaScript三者阻塞关系？

答：CSSOM DOM互不影响，JavaScript会阻塞DOM树的构建但JS前的HTML可以正常解析成DOM树，CSSOM的构建会阻塞JavaScript的执行。这也解释了为什么JavaScript的执行都需要访问DOM和CSSOM的能力，却只受CSSOM的阻塞。