页面渲染：过程分析

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的阻塞。