距上次的导航流程已有些日子，趁着这次休假把剩下的渲染流程也分享出来。
通过本文可以透视浏览器是如何进行渲染工作的。
众所周知，浏览器传输的相关文件包括 js文件html文件css文件。
//HTMl: 超文本 标记语言
山野乔治
//CSS：层叠样式表
p { color: red }
//JavaScript
p.style.color = 'gray' 通过页面修改内容
1.html的内容由标记和文本组成，标记也称为标签。每个标签都有自己特定的含义，浏览器会根据不同的语义化的标签来进行渲染不同的内容。比如上面的的
标签会告诉浏览器在这里需要创建一个新的段落，中间的文本就是段落要显示的内容。
2.css文件又称为层叠样式表，是由选择器和属性组成。通过css可以改变文字的大小，颜色等信息。图中的p标签，会把设定的属性值，全部应用到p标签上。
3.至于JavaScript，使用这个可以让页面的内容‘动’起来。也就是大部分的用户和浏览器的交互操作，都是通过JavaScript完成的。
搞清楚了HTML，CSS，JavaScript基本含义之后，我们就开始详细了解浏览器的渲染机制吧。
渲染模块在执行过程中会被划分为很多子阶段，输入的HTML经过这些子阶段，最后输出为了像素。我们把这样的一个处理流程就叫做渲染流水线，大致过程如下图所示。
按照渲染的时间顺序，流水线可以分为这几个子阶段：
- 构建DOM树
- 样式计算
- 布局阶段
- 分层
- 绘制
- 分块
- 光栅化
- 合成
每个阶段的过程中，我们应该重点关注：1，开始每个子阶段都有其输入的内容；2，然后每个子阶段有其处理过程；3，最终子阶段会生成其输出内容。也就是：输入-》加工-》输出
构建DOM树
为什么要构建DOM树呢？
我们浏览器是无法直接理解和使用HTML的（HTML标记语言是为了让开发人员进行编程的语言）所以浏览器需要将转化为浏览器可以理解的结构，那就是---DOM树。
了解过数据结构的开发人员应该都清楚什么是树结构。有一父节点可以有很多个子节点，但一个子节点不能被不同的父节点共享。在我们浏览器的渲染机制中，就频繁的使用到了树结构。
那么DOM树是如何进行构建并进行渲染的呢？
在构建DOM树的时候，输入内容就是一个简单的HTML文件，然后由HTML解析器进行解析，最终输出一个树状结构的DOM。
为了能直观的了解什么是DOM结构，可以在控制台上输入document进行查看完整的一个DOM结构。DOM和HTML内容几乎一摸一样的，但是和HTML不同的是，DOM是保存在内存中的树状结构，可以通过JavaScript来查询或修改其内容。如何通过JavaScript来修改DOM的内容呢？控制台输入以下内容
document.getElementsByTagName('p')[0].innerText = 'black'
这个代码作用就是把第一个P标签的文本内容转换为black。当执行这行代码的时候，DOM的一个p节点的内容成功被修改，同时页面的内容也会被修改。
这就是生成DOM树的过程，此刻DOM节点的样式我们依然不知道，要让DOM拥有正确的样式，就需要进行下一个渲染子进程了。
样式计算（Recalculate Style）
样式计算的目的是为了计算DOM节点中每个元素的具体样式，这个子进程大概需要分为三步来完成。
1.把CSS转化为浏览器能够理解的结构
那么CSS样式的来源主要有哪些呢？
通过link引用的外部CSS文件