层叠上下文初识 - 利用 chrome devTools 实现 css性能优化

最新推荐文章于 2024-01-13 03:45:00 发布

一把健

最新推荐文章于 2024-01-13 03:45:00 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签：层叠上下文 Chrome devTools css优化

本文链接：https://blog.csdn.net/qq_39446719/article/details/102980947

版权

MDN：堆栈上下文

参考博客：

CSS中重要的层叠概念

详谈层层合成(composite)

借助神奇 DevTools Layers 优化网页滑动性能

GPU加速是什么

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

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

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

层叠上下文（stacking context，MDN 官网称之为堆叠上下文，此文统称层叠上下文

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

根元素：

position：

容器：

opacity：

其他：

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

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

综上：

层叠上下文可以被其他层叠上下文包含，并一起创建层叠上下文的层次结构
每个层叠上下文和其兄弟独立开来；处理层叠上下文时仅考虑后代元素
每个层叠上下文都是独立的，将元素的内容堆叠之后，将按照父层叠上下文的堆叠顺序考虑整个元素；

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

别被吓到了，总结下来就一句话：谁大谁上，后来居上

考虑如下两个div

<body>
    <div id="a">
        <div id="a1"></div>
        <div id="a2">

关注