浏览器渲染过程


  • 构建 DOM 树:解析 HTML
  • 构建 CSSOM 树:解析 CSS
  • 构建渲染树:结合 DOM 树和 CSSOM 树,只包含可见节点
  • 布局:计算每个渲染树节点的大小和位置,又称为重排
  • 分层:针对特殊的节点生成专用的图层,比如绝对定位
  • 绘制:将每个图层的节点转换为实际像素,又称为重绘
  • 合成:将绘制好的每个图层层叠在一起