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 轉譯器中。
  • 不可變動的片段樹狀結構代表版面配置限制條件演算法的輸出內容 (以及輸入內容)。
  • 屬性樹狀結構代表網頁文件的轉換、剪輯、效果和捲動階層。這些值會在管道中使用。
  • 顯示清單和繪圖區塊是轉譯和分層演算法的輸入內容。
  • 合成器影格會封裝用於使用 GPU 繪製的介面、轉譯介面和 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 有時會選擇在與父項框架不同的轉譯程序中，轉譯跨來源框架。

在範例程式碼中，總共有三個影格：