LayoutTree和PaintLayerTree生成

备注:

从DOM树生成LayoutObject的条件:具体的标签可能会有自己的实现,例如HTMLEmbedElement,HTMLVideoElement,HTMLInputElement..

LayoutText文字节点会有自己特殊LayoutObject

DOM节点生成Layout节点条件 折叠源码

DISABLE_CFI_PERF

bool LayoutTreeBuilderForElement::ShouldCreateLayoutObject() const {

  if (!layout_object_parent_)

    return false;


  LayoutObject* parent_layout_object = this->ParentLayoutObject();

  if (!parent_layout_object)

    return false;

  if (!parent_layout_object->CanHaveChildren())

    return false;

  return node_->LayoutObjectIsNeeded(Style());

}

layout生成条件 折叠源码


bool Element::LayoutObjectIsNeeded(const ComputedStyle& style) {

  return style.Display() != EDisplay::kNone && // 不可见

         style.Display() != EDisplay::kContents; // display最大值

}

LayoutObject生成PaintLayer条件:

LayoutObject生成PaintLayer条件 折叠源码

PaintLayerType LayoutBox::LayerTypeRequired() const {

  // hasAutoZIndex only returns true if the element is positioned or a flex-item

  // since position:static elements that are not flex-items get their z-index

  // coerced to auto.

  if (IsPositioned() || CreatesGroup() || HasClipPath() ||

      HasTransformRelatedProperty() || HasHiddenBackface() || HasReflection() ||

      Style()->SpecifiesColumns() || Style()->IsStackingContext() ||

      Style()->ShouldCompositeForCurrentAnimations() ||

      RootScrollerUtil::IsEffective(*this))

    return kNormalPaintLayer;

  if (HasOverflowClip())

    return kOverflowClipPaintLayer;


  return kNoPaintLayer; // 不需要PaintLayer

}

允许生成的条件:

1. IsPositioned:position属性值不等于默认值static;

2. CreatesGroup:设置有透明度(transparent)、遮罩(mask)、滤镜(filter)或者混合模式(mix-blend-mode);

3. HasClipPath:设置有剪切路径(clip-path); 

4. HasTransformRelatedProperty:设置有2D或者3D转换(matrix、translate、scale、rotate、skew、perspective);

5. HasHiddenBackface:隐藏背面(backface-visibility: hidden);

6. HasReflection:设置有倒影(box-reflect);

7. SpecifiesColumns:设置有列宽和列数(columns: column-width column-count);

8. IsEffective:滚动条节点;

9. ShouldCompositeForCurrentAnimations:指定了不透明度(opacity)、变换(transform)或者滤镜(filter)动画;

10. HasOverflowClip:剪切溢出内容(overflow:hidden)。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容