RenderingNG 中的关键数据结构

Chris Harrelson
Chris Harrelson
X GitHub
Daniel Cheng
Daniel Cheng
GitHub
Philip Rogers
Philip Rogers
GitHub
Koji Ishi
Koji Ishi
GitHub
Ian Kilpatrick
Ian Kilpatrick
GitHub
Kyle Charbonneau
Kyle Charbonneau

我们来看看关键数据结构，它们是渲染流水线的输入和输出。

这些数据结构如下所示：

  • 帧树由本地和远程节点组成，这些节点表示哪些网页文档位于哪个渲染进程和哪个 Blink 渲染程序中。
  • 不可变 fragment 树表示布局约束算法的输出（和输入）。
  • 属性树表示网页文档的转换、剪裁、效果和滚动层次结构。这些参数会在整个流水线中使用。
  • 显示列表和绘制分块是光栅化和分层算法的输入。
  • 合成器帧封装了用于使用 GPU 绘图的 Surface、渲染 Surface 和 GPU 纹理图块。

在介绍这些数据结构之前，我们先通过以下示例来了解架构审核中的示例。本文档中将使用此示例，演示数据结构如何应用于它。

<!-- Example code -->
<html>
  <div style="overflow: hidden; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
      id="one" src="foo.com/etc"></iframe>
  </div>
  <iframe style="top:200px;
    transform: scale(1.1) translateX(200px)"
    id="two" src="bar.com"></iframe>
</html>

帧树

Chrome 有时可能会选择在与其父级框架不同的呈现进程中呈现跨源框架。

在示例代码中，总共有三个帧：