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)

third_party\blink\renderer\core\paint\paint_layer_painter.cc

对应以前是 external/chromium_org/third_party/WebKit/Source/core/rendering/RenderLayer.cpp

Dom节点每个对象对应一个 LayoutObject，当 layoutObject处于同一个渲染空间时，形成 PaintLayer（即绘制层，以前的渲染层）。PaintLayers 来保证页面元素以正确的顺序合成.。 这时候就会出现层合成 paintLayer（composite），从而正确处理透明元素和重叠元素的显示。合成是合成paintLayer。

  GraphicsContext 绘图上下文，它提供绘制指令接口，比如 drawImage，drawRect。关联着 paintOpBuffer,去调用这些绘制指令，生成绘制命令。这是blink内部指令，一条条指令生成指令集合。起了别名 PaintRecord。这些指令都有序列化，反序列化接口。这些指令可以有具体实现去做。 

序列化后可以传到gpu，由gpu绘制。 

也可以给skia去绘制，即把 PaintOp转成了 SkPicture.就是用skia的绘制指令实现绘制。 

机制都是通过创建不同的canvas实现，对同一条指令做不通处理。  ，比如 输出指令日志，光栅化指令，或者把指令生成skp（即skia的picture，可以通过canvaskit绘制）。

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）组成。每个阶段都代表了在渲染进程中完成一项定义明确的任务代码。制品则是数据结构，是各阶段的输入或输出，在图中，输入输出用箭头表示。