浏览器渲染流程

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树

• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

• Display:将像素发送给GPU，展示在页面上

  ---

  渲染流程有四个主要步骤：
  1. 解析 HTML 生成 DOM 树 - 渲染引擎首先解析 HTML 文档，生成 DOM 树
  2. 构建 Render 树 - 接下来不管是内联式，外联式还是嵌入式引入的 CSS 样式会被解析生成 CSSOM
  树，根据 DOM 树与 CSSOM 树生成另外一棵用于渲染的树 - 渲染树 (Render tree) ，
  3. 布局 Render 树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
  4. 绘制 Render 树 - 最后遍历渲染树并用 UI 后端层将每一个节点绘制出来