1. 先对 HTML 进行解析，产生 DOM 树

      DOM 树中的每一个节点，都对应一个渲染对象 render object 处在相同坐标空间的渲染对象会生成一个 渲染层

    2. 解析 CSS 产生 CSSOM 树

    3. 将 DOM 树和 CSSOM 树结合，产生一颗 render tree 渲染树
    4. 布局 layout，对 渲染树 上的每一个节点进行遍历，计算他们的位置信息
    5. 绘制 paint，遍历渲染树，调用渲染器的 paint() 方法将节点内容绘制在屏幕上，绘制这一步在多个层上进行的，这些层统称为 渲染层，满足条件的渲染层会被浏览器自动提升到合成层，合成层可以开启 GPU 加速，比如使用了 3d transform、will-change、opacity 等会将渲染层提升到合成层。但是GPU加速不能盲目使用，因为合成层一旦数量太多，会产生层爆炸，占用内存和CPU资源，页面严重卡顿。
    6. 渲染层合成，多个渲染层进行合并，生成位图，通过显卡显示在屏幕上

    https://juejin.cn/post/6844903966573068301