代码HTML，CSS,JS怎么渲染成页面

渲染流程

当渲染进程从网络进程中获取到了文档之后，会进行资源解析及子资源加载。即进入渲染阶段，渲染阶段包含以下几个子阶段，每个阶段都有输入内容，处理过程，输出内容

构建DOM树

输入HTML文件，对HTML进行解析，输出树状结构的DOM树

样式计算

生成DOM树后，还不能知道DOM的形态，需要进行样式计算。
1，把CSS转换成浏览器理解的结构-styleSheets.
styleSheets里面包含三种来源的样式文件，

2，对属性值标准化操作
CSS中的一些属性浏览器引擎不能理解，需要对其进行标准化，例如，颜色需要转换为rgb类型，fount-size:1em,要转换成fount-size:16px.

3，计算出DOM树中每个节点的具体样式
上面2步已经有了CSS被浏览器引擎理解的结构，还需要计算出DOM的具体每个节点的样式。
这里就需要根据CSS的继承规则和层叠规则计算出DOM树的每个节点具体样式。

布局阶段

从上面阶段我们知道了DOM树和DOM树元素的具体样式，但是我们还不知道具体的DOM树可见元素的具体位置，所以我们需要对DOM树进行布局。
1，布局树创建
首先需要创建可见元素的布局树，例如；document,link,html,style这些不可见的元素不会包含在里面。
然后计算出布局树每个节点的具体位置。

分层

页面中有一些复杂的效果，如使用了z-index，动画，定位等属性效果，所以渲染引擎就给特定的节点生产相应大的图层，构成一个图层树，就如PS中的图层概念相似，最终是有多个图层叠加形成最终展示页面。

绘制

有了图层树，渲染引擎会把图层绘制拆分成多个小的绘制指令，组成绘制指令表

分块

有时页面视图窗口是变化的，每个图层会被分为很多小图块，当试图窗口变化的时候，窗口附件的小块会优先生成

栅格化

栅格化，是指将块图转化为位图，图块是栅格化的最小单位。

合成

当所有图块都被栅格化，合成线程会生成绘制图块的命令，然后将命令给浏览器进程，浏览器进程根据命令将页面绘制到内存中，最终显示在页面。