在上一个章节中讲解了浏览器从输入URL到最后页面展示的流程，其中缺少了一个比较重要的环节就是，渲染进程和网络进程建立管道后拿到全部的响应数据后 渲染页面和加载资源的过程，本节详细的阐述下这个过程。
渲染流程
渲染进程的到HTML、CSS、JS 最后经过一系列的处理得到用户看到的漂亮的网页，可以理解得到一副漂亮的图片，这个流程到底是怎么处理的？
这中间的渲染模块就是我们今天要讨论的 在开始之前先来了解下被渲染的主角。
什么是HTML？ 通俗解释就是 超文本标记语言。 标记 文本 组成的。
<p>tom.ding</p>
<p></p> HTML标记 标记也称为标签，每个标签都有它自己的语意，浏览器会根据标签的语意来正确展示HTML内容
比如上面的<p>标签是告诉浏览器在这里的内容需要创建一个新段落，中间的文本就是段落中需要显示的内容
tom.ding 文本
组合在一起构成了超文本标记语言
什么是CSS？ 通俗解释就是层叠样式表。 层叠样式表，是由选择器和属性组成
p{color:red}
p 选择器
color 属性
red 值
// 它会把HTML里面<p>标签的内容选择出来，然后再把选择器的属性值应用到<p>标签内容上。选择器里面有个color属性，它的值是red，这是告诉渲染引擎把<p>标签的内容显示为红色
什么是JS？ 脚本程序使用它可以使网⻚的内容“动”起来 通过js来修改页面内容
p.style.color = 'yellow'
后面会详细说明宿主 v8 渲染进程等等的关系
渲染流水线 【HTML、CSS、JS】 -> 【渲染流程 process 1 .... N】 -> 显示
渲染流水
【DOM构建DOM树】->【样式的计算】->【布局树】->【分层】->【绘制】->【分块】->【光栅】->【合成】->【显示】
每个过程都会经历 输入内容、处理内容、输出结果。
1、构建DOM树
为什么要构建DOM树？ 因为HTML传输过来仅仅就是字符串，浏览器不认识这一堆字符串，需要分析构建成浏览器可以理解的DOM TREE 什么是树结构？
有一个父节点，可以有多个子节点。
从HTML的输入开始 -> HTMLParse(html解析器)->DOM树的输出。 从图中可以看出 DOM树构建流程中：HTML字符串是输入内容 HTMLParse是处理 DOM树是这个流程最后的产物。
在浏览器中打开console 输入 document 可以看到一个完整的构建后的dom树
图中的document就是DOM结构，你可以看到，DOM和HTML内容几乎是一样的，但是和HTML
不同的是，DOM是保存在内存中树状结构，可以通过JavaScript来查询或修改其内容。
通过一段JS在修改内存中的结构与页面上的展示。
document.getElementsByTagName("body")[0].innerText = "black"
2、构建样式
样式的目的是为了计算出DOM节点呈现出来的样式分三步
1、把CSS转换为浏览器能够理解的结构 同样的在获取了CSS后浏览器也不认识CSS字符串需要把CSS转为CSS文本全部转换为styleSheets结构中的数据，不管是LINK STYLE 还是内联样式都会转为styleSheets 在开发者工具中console 输入document.styleSheets 就可以看到一棵完整树。
2、转换样式表中的属性值，使其标准化
body { font-size: 2em }
p {color:blue;}
span {display: none}
div {font-weight: bold}
div p {color:green;}
div {color:red; }
转换为
可以看到em、bold、green、red 都被转为了rgb标准的值
3、计算出DOM树中每个节点的具体样式 这就涉及到CSS的继承规则和层叠规则了 CSS继承就是每个DOM节点都包含有父节点的样式
通过开发者工具的element 可以看到完整的继承关系。
这里需要特别提下UserAgent样式，它是浏览器提供的一组默认样式，如果你不提供任何样式，默认使用的就是UserAgent样式。
层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称“层叠样式表”正是强调了这一点
如果你想了解每个DOM元素最终的计算样式，可以打开Chrome的“开发者工具”，选择第一个“element”标签，然后再选择“Computed”子标签
最终计算后的样式
3、布局阶段 现在，我们有DOM树和DOM树中元素的样式，但这还不足以显示⻚面，因为我们还不知道DOM元素的几何位置信息。那么接下来就需要计算出DOM树中可⻅元素的几何位置，我们把这个计算过程叫做布局。
1.创建布局树 DOM树还含有很多不可⻅的元素，比如head标签，还有使用了display:none属性的元素。所以在显示之前，我们还要额外地构建一棵只包含可⻅元素布局树
DOM树+computedStyle合成为布局树
可以看到流程1的DOM树和右侧的computed style树进行了合并。
右边的样式作用到了左边的树生成一个新的布局树，计算了几何大小样式的样子，隐藏了不可见的节点，注意none就没往布局树上去画。
总结流程
浏览器不能直接理解HTML数据，所以第一步需要将其转换为浏览器能够理解的DOM树结构生成DOM树后，还需要根据CSS样式表，来计算出DOM树所有节点的样式；最后计算DOM元素的布局信息，使其都保存在布局树中
和DOM不一样，在源码里面并没有CSSOM这个词，CSSOM 应该是就是styleSheets，
这个styleSheets是能直观感受的到的可以把LayoutTree看成是渲染树
