一共有8个阶段∶构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。
    1.构建dom树
    为啥构建dom树，因为浏览器语法直接理解html，需要转化为其能够理解的dom树。
    输入内容为html，由html引擎解析为，dom树。
    document和html内容几乎是相同的，但是document是保存在内存中的树状结构，可以由JavaScript进行查询修改。
    现在dom节点有了，但是样式还母鸡，要让dom树有正确样式，就需要计算样式了。
    2.样式计算
    这个过程的目的是计算dom树每个节点的样式，分为三步
    a.将css文本转化为浏览器识别的stylesheets
    将外部引入，style标签内，行内样式转化为stylesheets。可以打印document.stylesheets查看。此结构提供查询修改功能，为后面样式操作做基础。
    b.样式属性标准化
    现在浏览器已经可以理解stylesheets了，但是有些属性不容易被渲染，譬如说2rem，bold,red这些属性会被转化为标准属性，36px,700,rgb（255.00）
    c.计算每个dom节点样式
    根据css的继承规则和层叠规则计算出computedstyle。可以在浏览器element标签下的computed栏查看对应节点的样式。

    3.布局阶段
    a.Dom树中还有一些不会显示的节点，比如head标签，样式为display:none的节点。所以需要创建一颗只包含可见节点的布局树🌲 。
    b.计算布局树每个节点的坐标位置。

    4.分层
    有了布局树每个节点坐标就可以绘制了吗？不行哦。页面中可能会有3d效果，页面活动，或者用z-index做z轴排序的地方，为了更方便实现这些效果，浏览器需要构建一个图层树（layer tree）。
    浏览器页面是有多个图层叠加而来的。每个节点都处在一个图层。满足哪些条件，渲染引擎才会才会为单独的节点创建新的图层呢。
    a.明确定位属性、z轴排序属性、css过滤属性filter、透明属性opacity
    b.裁剪clip的节点。父容器显示不下的内容。被挤下去的文字。

    5.图层绘制
    根据layer tree绘制图层
    6.栅格化
    分块绘制图层
    绘制列表用来记录绘制顺序和绘制指令。绘制列表生成后，会交给渲染进程的合成线程进行绘制。
    合成会将图层分为图块，然后生成位图，视口附近位图优先生成，此过程叫作栅格化。栅格化一般会用到gpu加速，这就涉及到了跨进程操作。
    7.合成与显示
    待所有图块栅格化后，合成线程会向浏览器发送消息，浏览器会将位图合成为页面进行显示。