chromium 術語

 一、以前的類前綴 Render 都被替換成了 Layout？？

(比如 core/dom/RenderTreeBuilder.cpp 換成了 \third_party\blink\renderer\core\dom\layout_tree_builder.cc

LayoutObject，以前是 RenderObject ？？？  (layout_object.cc)

PaintLayer，以前是 RenderLayer

PictureLayer 以前是 GraphicLayer (GL)

Dom節點每個對象對應一個 LayoutObject，當 layoutObject處於同一個渲染空間時，形成 PaintLayer（即繪製層，以前的渲染層）。PaintLayers 來保證頁面元素以正確的順序合成.。 這時候就會出現層合成 paintLayer（composite），從而正確處理透明元素和重疊元素的顯示。合成是合成paintLayer。

  GraphicsContext 繪圖上下文的責任就是向屏幕進行像素繪製(這個過程是先把像素級的數據寫入位圖中，然後再顯示到顯示器)，在chrome裏，繪圖上下文是包裹了的 Skia（chrome 自己的 2d 圖形繪製庫） 

Dom tree + cssom tree> RenderObject tree > renderlayer tree> 整理合並生成層 graphic layer

在圖層中的Paint count： 當有css屬性position:fixed屬性，在滾動時這段區域不動，會導致它需要不斷重繪，Paint count一直在增長；

Layer的生成，即PaintLayer（\blink\renderer\core\layout\layout_box_model_object.cc）：

查看代碼

void LayoutBoxModelObject::CreateLayerAfterStyleChange() {
  NOT_DESTROYED();
  DCHECK(!HasLayer() && !Layer());
  GetMutableForPainting().FirstFragment().SetLayer(
      MakeGarbageCollected<PaintLayer>(this));
  SetHasLayer(true);
  Layer()->InsertOnlyThisLayerAfterStyleChange();
  // Creating a layer may affect existence of the LocalBorderBoxProperties, so
  // we need to ensure that we update paint properties.
  SetNeedsPaintPropertyUpdate();
  if (GetScrollableArea())
    GetScrollableArea()->InvalidateScrollTimeline();
}

1）瀏覽器內核原理--Chromium Blink流程 PaintLayer和GraphicsLayer - 知乎 (zhihu.com)

2）(15條消息) Chromium網頁Render Layer Tree創建過程分析_羅昇陽的博客-CSDN博客

3）LayoutNG介紹 - 知乎 (zhihu.com)

LayoutNG readme 

4）*****

 揭祕 Chromium 渲染引擎（三）：關鍵數據結構 - 知乎 (zhihu.com)

揭祕 Chromium 渲染引擎（一）：RenderingNG - 知乎 (zhihu.com)

揭祕 Chromium 渲染引擎（二）：RenderingNG 架構概覽 - 知乎 (zhihu.com)

揭祕 Chromium 渲染引擎（四）：深入視頻引擎 - 知乎 (zhihu.com)

 英文原作者：This post is a part of a series on the Chromium rendering engine. Check out the rest of the series to learn more about RenderingNG, the architecture, VideoNG, and LayoutNG. key data structures

5）瀏覽器渲染過程概述 - 知乎 (zhihu.com)

stage與 artifact

渲染是在管線上進行的，管線由各個階段（stage）和製品（artifact）組成。每個階段都代表了在渲染進程中完成一項定義明確的任務代碼。製品則是數據結構，是各階段的輸入或輸出，在圖中，輸入輸出用箭頭表示。