一、层叠相关概念

层叠上下文

stacking content层叠上下文是HTML中的一个三维概念，在CSS2.1规范中就提出每个盒模型都是三维的，我们将水平向左定做x轴正方向，垂直向下定做y轴正方向，垂直设备屏幕朝向用户的方向定做z轴正方向，相比你在CSS布局等实践中注意到元素之间是会发生层叠（互相遮挡）的现象吧，这就是发生层叠元素在z轴的层叠关系
165890e473ce9cd3_tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.webp

层叠顺序与层叠等级

那么在发生层叠时，如何判断哪个元素在“上层”，会覆盖“下层”的元素呢，这就是层叠顺序要说明的问题
stacking order层叠顺序表示元素发生层叠时按照特定的顺序在z轴上垂直显示，其是一种规则

  1. 处于不同层叠上下文的元素根据其所在层叠上下文的层叠顺序发生层叠
  2. 处于同一层叠上下文的元素按照如下顺序发生层叠

    **z-index** 该样式属性用于设置元素的堆叠层级，是相关层叠上下文的核心样式之一，详细请查询MDN 注意：该属性生效需要配合非static的position属性

层叠等级 层叠等级就是个描述元素层叠顺序的名词，比如A元素的层叠等级大于B元素的层叠等级 因此没什么好介绍的

1658910c5cb364b6_tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.webp

层叠上下文的产生

满足如下任意要求则该元素会产生层叠上下文

  1. HTML根元素
  2. 非auto的z-index且非static的position
  3. 非1的opacity
  4. 非none的transform
  5. 非none的filter
  6. 非none的will-change
  7. 等等

    二、层叠发生的过程

    这个过程也跟浏览器的渲染密切相关，推荐先阅读如下文章对浏览器的渲染过程有大致了解

    这部分由于我也只略懂一二，我只能大致浅述下流程

首先浏览器会创建DOM树，然后经过样式计算（格式化与标准化样式表），并随后进行布局树的创建。在下一步就是我们层叠研究的起点——分层

分层-渲染层的产生

分层的主要工作是图层树的创建
经过布局树的构建，此时的树的节点还都只是HTML的Node节点，但在图层树的树节点是图层，因此生成图层树的过程中，主要是将满足层叠上下文属性的元素提升为新图层，而不满足的则会随同父元素属于同一图层中

此时的图层可以称之为渲染图层，又称渲染层RenderLayer

详细的图层的提升大致分为两种情况

  • 显式合成
    • 拥有层叠上下文的元素
    • 需要剪裁的元素（比如文本的溢出的剪裁处理）
  • 隐式合成
    • 通俗的讲就是由于z-index较低的元素会被提升为一个单独的图层，那么与该元素发生层叠并层叠等级比它高的元素都会提升为独立图层（简单理解就是如果不提升，则无法最终覆盖在其上，将造成错误的层叠效果）这里其实有一个隐患，层爆炸

      绘制

      我们得到图层树后，则将进入图层的绘制过程，其绘制的原理可以理解为人的临摹作画一样，会将复杂的图层进行拆分为许多很小的绘制指令，然后将指令按顺序组成一个绘制列表，交由浏览器渲染进程里的合成线程操作这之前的操作由CPU处理，但从这之后将由GPU进行处理（这就叫GPU加速）

      分块、光栅化-合成层的产生

      这两步流程这里不做详细描述，而这两个步骤正是**合成**的过程，在这期间合成线程中会将之前产生的图层进行合并，经过图层合并后的图层我们称之为合成图层，又称合成层、图形层GraphicsLayer``而Edge与Chrome浏览器有提供查看Layer的调试工具，在其中我们可以看到绘制指令和合成层
      1. 通过这两步流程之后就是最后的显示流程了
      2. 如下图是某大佬绘制的图，其实有很多讲述浏览器渲染流程的文章中提及渲染树RenderTree，其实这个概念可能已是很久以前的浏览器渲染机制的过程了，我们可以将渲染树比作如今的布局树

1f6afa7de5c948a98e0bf680aabe8dcb_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

三、合成层

通过上文我们得知合成层其实是渲染层合并图层产生的，但合并的标准是什么呢

合成层的产生

满足如下任意要求则该渲染层会提升为合成层

  1. transform具有3D变换：translate3d,translateZ
  2. will-change
  3. 对opacity | transform | filter应用了过滤和动画transition/animation
  4. video,canvas,iframe元素

    合成层的作用

    其最主要的作用就是GPU加速，实现性能优化
    合成层的处理会交由GPU处理，这比一般在CPU处理效率更高，在谈及渲染性能优化，我们不可避免的会提及回流与重绘，而这恰是合成层的强项，其在transform,opacity等动画效果下并不会触发回流与重绘，并且是由GPU单独处理，不会影响主进程CPU的工作
    但其也不是万金油，如果图层过多反而会占用大量内存，尤其是移动端，这种过度依赖GPU的“优化”反而会适得其反层爆炸问题就这个原因