浏览器渲染机制过程

以下是浏览器渲染机制必经过程

  • 根据HTML构建HTML树（DOM）
  • 根据CSS构建CSS树（CSSDOM）
  • 将这俩棵树合并成一棵树（Reder Tree）
  • Latout 布局 （文档流、盒模型、计算大小和位置）
  • Paint 绘制 （把边框颜色、文字颜色、阴影等画出来）
  • Compose 合成 （根据层叠关系展示画面）

说一下这些步骤是什么样的（详细）

Too lang；don’t read：

  • 处理HTML并构建DOM树
  • 处理CS并构建CSSDOM树
  • DOM 树 与CSSDOM 树 合并后形成渲染树
  • 根据渲染树来布局 ，以计算每个节点的几何信息（布局会计算每个对象的精确位置和大小）
  • 最后一步是绘制， 使用最终渲染树将像素渲染到屏幕上

第一步是让浏览器将DOM和CSSDOM 合并成一个“渲染树”，收集页面上所有可以看见的DOM内容、以及每个节点所有的CSSDOM样式信息。

为构建渲染树，浏览器会完成下列工作：

  1. 从DOM树的根节点开始遍历每个可见节点
  2. 对于每个可见节点，找到适配的CSSDOM规则并应用它们
  3. 发射可见节点，连同其内容和计算的样式

最终输出的渲染同时包含了屏幕上的所有可见的内容和样式信息。

渲染树

有了渲染树，接下来的阶段就要进入 Layout布局 阶段,顾名思义，就是计算出每个节点在屏幕中的位置。

  • Layout 事件会在时间线中捕获渲染树构建以及位置和尺寸计算
  • 布局完成后，浏览器会立即发出 Paint Setup 和 Paint 事件，按照算出来的规则，将渲染树转换成屏幕上的像素