Schlüsseldatenstrukturen in 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

Sehen wir uns die wichtigsten Datenstrukturen an, die Eingaben und Ausgaben der Rendering-Pipeline sind.

Diese Datenstrukturen sind:

  • Framebäume bestehen aus lokalen und Remote-Knoten, die angeben, welche Webdokumente sich in welchem Rendering-Prozess und in welchem Blink-Renderer befinden.
  • Der unveränderliche Fragmentbaum ist die Ausgabe (und Eingabe) des Layout-Einschränkungsalgorithmus.
  • Property-Bäume repräsentieren die Transformations-, Clip-, Effekt- und Scrollhierarchien eines Webdokuments. Sie werden in der gesamten Pipeline verwendet.
  • Displaylisten und Paint-Chunks sind die Eingaben für die Raster- und Ebenenalgorithmen.
  • Compositor-Frames umfassen Oberflächen, Rendering-Oberflächen und GPU-Textur-Kacheln, die mit der GPU zum Zeichnen verwendet werden.

Bevor wir uns diese Datenstrukturen ansehen, bauen wir das folgende Beispiel auf einem Beispiel aus der Architekturüberprüfung auf. Dieses Beispiel wird im gesamten Dokument verwendet, um zu veranschaulichen, wie die Datenstrukturen darauf angewendet werden.

<!-- 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>

Bäume umrahmen

Chrome rendert einen plattformübergreifenden Frame manchmal in einem anderen Renderprozess als seinen übergeordneten Frame.

Im Beispielcode gibt es insgesamt drei Frames: