利用 Layer 优化页面

[chokcoco]

层的一些基本概念

什么是 stacking context

stacking context 意为层叠上下文。

在浏览器的元素渲染过程中，除了水平的布局，还有一条沿着相对于用户的假想 Z 轴。

在水平的布局中，有块级上下文(BFC)等绘制规则，而在 Z 轴上，有层叠上下文(stacking context)的绘制规则。

层叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

在某些时候，我们对某些元素使用 z-index ，导致某些元素的呈现顺序受其 z-index 值影响。发生这种情况是因为这些元素具有特殊的属性，这些属性导致它们形成了层叠上下文。从而可以根据 z-index 指定 Z 轴的优先级。

如何触发一个元素生成层叠上下文

那么，如何触发一个元素生成层叠上下文呢？

MDN 上写的比较笼统，我们简单进行分类描述：

在以下情况下，文档中的任何元素只要拥有以下条件之一，即可形成堆叠上下文：

根元素：

• 文档的根元素（）。

position：

• 值为 absolute 或者 relative ，并且 z-index 的值不为 auto 的元素
• 值为 fixed 或 sticky 的元素

容器：

• 元素是 flex 容器的子元素，并且其 z-index 的值不是 auto。
• 元素是 grid 容器的子元素，并且其 z-index 值不是auto。

opacity：

• opacity的值小于的元素1（请参见不透明度的规范）。

其他：

具有以下任一属性的元素，并且其值不是 none：

• transform
• filter
• perspective
• clip-path（裁剪）
• mask/ mask-image / mask-border
• mix-blend-mode 的值不是 normal 的元素。
• 属性 isolation（隔离）的值为 isolate 的元素。（该属性就是可以主动申请一个 层叠上下文）

以下为当前兼容性不足或者不推荐的但能生成层叠上下文的技术：

• 属性 -webkit-overflow-scrolling 的值为 touch 的元素。
• 属性 will-change 值不为初始值的元素（重要提示： will-change 旨在用作最后手段，以尝试解决现有的性能问题。不应将其用于预期性能问题。）。
• 属性 contain 的值 layout，或者 paint，或包括它们中的一个复合值（即 contain: strict，contain: content）。（这是一项实验性技术，请在生产中使用它之前仔细检查浏览器兼容性表。）

综上：

1. 层叠上下文可以被其他层叠上下文包含，并一起创建层叠上下文的层次结构；

2. 每个层叠上下文和其兄弟独立开来，处理层叠上下文时仅考虑后代元素；

3. 每个层叠上下文都是独立的，将元素的内容堆叠之后，将按照父层叠上下文的堆叠顺序考虑整个元素；

注意：比较堆叠顺序时，将只比较同级 DOM 的堆叠顺序，相同情况下再考虑子元素，直到一方比另一方大。

什么是 stacking level

什么是层叠水平呢？就是有了层叠上下文后，还有一套规则把所有元素（有层叠上下文和没有层叠上下文的）放在一起进行层级优先级排列的，也就是大家非常熟悉的这张图：

什么是 Render Object

什么是 RenderLayers

什么是 composite

什么是 graphicLayer

什么是 栅格化

侧视图

正视图