html：超文本标记语言
由标记和文本组成，标记也成为标签。每一个标签都由自己特殊含义
css ：层叠样式表
是由选择器和属性组成，根据选择器选择对应的节点，然后再告诉浏览器，某个属性的值。
js：javaScript 编程语言
按照渲染的时间顺序，流水线可以分为
- 构建dom树
- 样式计算
- 布局阶段
- 分层
- 绘制
- 分块
- 光栅化
- 合成
一 、构建dom树
为什么要构建dom树？
因为浏览器无法直接理解和使用HTML，所以需要将HTML转换成浏览器能够理解的-DOM树
dom树本质是一种树结构。
也可以通过浏览器控制台来解析dom树，html和dom内容是一摸一样的。但是dom保存在内存中，通过js可以操作或者修改其内容
虽然生成了dom树。但是dom节点样式需要正确的被计算出来
二、样式计算
样式计算可以分为三个部分
1.把css转换成浏览器能够理解的结构
样式引入的方式有三种： 行内样式。内部样式表，外联样式表
和html文件一样，浏览器也是无法直接理解这些纯文本的css样式。当渲染引擎接口到css文件时，会之星一个转换操作。将css文本转换成为浏览器可以理解的结构 ------ styleSheet
在浏览器控制台可以输入document.styleSheets 看到完整结构
2.转换样式表中的属性值。使其标准化
例如长度单位。vh，vw，rem，em......、blue,red......等等这些值不会被渲染引擎理解。所以这些需要将所有值转换成渲染引擎容易理解的，标准化的计算值。
3.计算dom树中每个节点的具体样式
- css继承，css继承是每个dom节点都包含有父节点的样式。在浏览器中可以可以看到继承的样式
- 可以通过style旁边computed来看当前元素的所有样式
布局阶段
现在已经存在dom树。但是还不能显示页面，因为不知道dom元素的几何位置。接下来就要计算出dom树种可见元素的集合位置。我们把这个一个过程称之为布局。chrome在布局阶段需要完成两个任务，创建布局树和布局计算。
分层：页面有很多复杂效果。比如3d变换，页面滚动，或者使用z-index做轴排序。渲染引擎还需要为特定的节点生成专用的图层并生成一颗对应的图层树。
并不是每个节点都包含图层，如果当前节点没有图层。那么当前节点属于父级图层。
视口：屏幕上可见区域就是视口（viewport）
一个页面可能会比较大，浏览器会把页面划分成图块。一个页面可能分成很多，视口中也会有几个图块。合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图
一个完整渲染过程大致如下：
1.渲染进程将html内容转换成为能够读懂的dom树结构
2.渲染引擎将css样式，转化为浏览器可以理解的styleSheets，计算dom节点的样式
3.创建布局树。并计算元素的布局信息
4.对布局树进行分层，并生成分层树
5.为每个图层绘制成列表。并将其提交到合成线程
6.合成线程将图层分成图块，并且在光栅化线程池中将图块转换成位图
7.合成线程发送绘制图块命令DrawQuad给浏览器进程
8.浏览器进程根据drawQuad消息生成页面，并显示到显示器上。
