1. 首页
  2. css

让我们深入研究一下CSS包含属性

与过去相比,现代浏览器在呈现一个典型网页所提供的由HTML、CSS和JavaScript代码组成的复杂网络方面变得非常高效。只需毫秒就可以将我们提供给它的代码渲染成人们可以使用的东西。
作为前端开发人员,我们能做些什么来帮助浏览器更快地渲染呢?在我们的现代工具中,有一些常见的最佳实践很容易被遗忘,特别是在我们可能无法对生成的代码进行太多控制的情况下。例如,我们可以用更少更简单的选择器来控制CSS。我们可以控制我们的HTML;用更少的节点,尤其是更少的子节点,使树更平坦。我们可以控制我们的JavaScript;同时小心我们的HTML和CSS操作,像Vue和React这样的现代框架确实对最后一部分有所帮助。
我想探索一个CSS属性,我们可以用它来帮助浏览器找出哪些计算可以降低优先级,甚至可以完全跳过。
这个属性称为contain。下面是MDN定义此属性的方式:
CSS属性允许作者指出一个元素及其内容尽可能独立于文档树的其余部分。这允许浏览器重新计算DOM的有限区域(而不是整个页面)的布局、样式、绘制、大小或它们的任意组合,从而带来明显的性能优势。
查看此属性所提供内容的一种简单方法是,我们可以向浏览器提示各种元素之间的关系在页面上。不一定是较小的元素,如段落或链接,而是较大的组,如节或文章。本质上,我们讨论的是包含内容的容器元素——甚至是在本质上可以是动态的内容。试想一个典型的SPA,在这个SPA中,动态内容在整个页面中被插入和删除,通常独立于页面上的其他内容。
浏览器无法预测将来JavaScript在页面上插入和删除内容时可能发生的页面布局变化。即使是向元素插入类名、设置DOM元素的动画或仅仅获取元素的维度这样的简单操作也会导致页面的回流和重新绘制。这样的事情可能很昂贵,应该避免,或者至少尽可能减少。
开发人员可以预测未来,因为他们会根据页面设计的用户体验知道未来可能发生的变化,例如,当用户单击某个按钮时,它将调用将数据插入当前视图中某个位置的div中。我们知道这是一种可能性,但浏览器没有。我们还知道,在div中插入数据很有可能不会在视觉上或其他方面改变页面上其他元素的任何内容。
浏览器开发人员花了大量时间优化浏览器以处理此类情况。在这种情况下,有多种方法可以帮助浏览器提高效率,但更直接的提示会有所帮助。contain属性为我们提供了一种提供这些提示的方法。包含的各种方法
contain属性有三个值,可以单独使用,也可以组合使用:size,layout,和paint。它还有两个常用组合的速记值:strict和content。让我们介绍一下每一个的基本知识。
请记住,规范中涉及到的每一项都有许多规则和边缘情况。我想在大多数情况下,这些都不会引起太多的关注。但是,如果您得到了一个不希望得到的结果,那么快速查看一下规范可能会很方便。
规范中还有一个style包含类型,本文将不介绍。原因是style安全壳类型目前被认为价值不大,目前有可能从规范中删除。尺寸安全壳
size安全壳实际上是一个简单的解释。当布局计算中涉及包含此容器的容器时,浏览器可能会跳过很多,因为它会忽略该容器的子容器。预期容器将有一个设置的高度和宽度;否则,它将折叠,这是页面布局中唯一考虑的事情。它被视为没有任何内容。
考虑到子代可以影响其容器的大小,这取决于容器的样式。在计算布局时必须考虑到这一点;对于size安全壳,很可能不会考虑。一旦容器的大小与页面相关,那么它的子代的布局就会被计算出来在优化方面做了很多工作。它通常与其他值结合使用。
不过,它可以提供的一个好处是帮助JavaScript根据容器的大小改变容器的子体,例如容器查询类型的情况。在某些情况下,根据容器的大小更改子体可能会导致容器在对子体进行更改后更改大小。由于容器大小的更改可能会触发子体中的另一个更改,因此最终可能会出现一个更改循环。paint遏制可以帮助防止这种循环。
这是一个完全人为设计的调整循环概念的例子:CodePen Embed Fallback
在本例中,单击\”开始\”按钮将根据紫色父框的大小加上5个像素,使红色框开始增长。当紫色框调整大小时,一个调整大小的观察者会告诉红色方块根据父对象的大小再次调整大小。这将导致父对象再次调整大小,以此类推。一旦父级达到300像素以上,代码就会停止此过程,以防止无限循环。
当然,重置按钮会将所有内容放回原位。
单击\”设置大小包含\”复选框设置不同的尺寸,并在紫色框中设置z-index包含。现在,当您单击开始按钮时,红色框将根据紫色框的宽度自行调整大小。确实,它会溢出父级,但关键是它只会调整一次容器大小并停止;不再有循环。
如果单击\”调整容器大小\”按钮,紫色框会变宽。延迟后,红色框将相应地调整自身大小。再次单击该按钮,紫色框将返回其原始大小,然后红色框将再次调整大小。
虽然可以在不使用容器的情况下完成此操作,但您将错过这些好处。如果这种情况在页面中经常发生,那么包含可以帮助进行页面布局计算。当子体在容器内部发生更改时,页面的其余部分的行为就像从未发生过更改一样。布局容器
top容器告诉浏览器外部元素不会影响容器元素的内部布局,容器元素的内部布局也不会影响外部元素。因此,当浏览器进行布局计算时,它可以假设具有布局包含的各种元素不会影响其他元素。这可以减少需要进行的计算量。
另一个好处是,如果容器不在屏幕上或被遮挡,相关的计算可能会延迟或降低优先级。该规范提供的一个示例是:
[…]例如,如果包含框靠近块容器的末尾,并且您正在查看块容器的开头,则包含left的容器将成为paint或size位置子体的包含框。这与对容器应用height位置相同。因此,请记住在应用这种类型的容器时,容器的后代可能会受到怎样的影响。
在类似的注释中,容器会获得一个新的堆栈上下文,因此width可以像应用size、size或z-index位置一样使用。尽管如此,设置top、left、size或style属性对容器没有影响。
这里有一个简单的例子:CodePen Embed Fallback
单击该框并切换counter-increment包含。当counter-set封闭应用时,两条绝对位置的紫色线将移动到紫色框内。这是因为紫色的盒子变成了一个包含块。另一件需要注意的事情是,容器现在堆放在绿线之上。这是因为容器现在有了一个新的堆叠上下文,并相应地遵循这些规则。绘制容器
open-quote容器告诉浏览器,容器的任何子级都不会被绘制在容器框尺寸的边界之外。这类似于将close-quote放在容器上,但有一些区别。
首先,容器得到与在no-open-quote容器下相同的处理:它成为一个具有自己堆叠上下文的包含块。因此,在no-close-quote安全壳内放置儿童将在放置方面尊重容器。如果我们要复制上面的content包容演示,而使用div {contain: layout paint;}包容,结果会大同小异。区别在于使用透明的渲染面板***84***
您可以看到选中的复选框和容器的结果。即使应用了内容限制,该框也具有\”在滚动时重新绘制\”以及显示滚动时绘制的绿色覆盖层。在第二个图像中应用了***85***的呈现面板,您可以看到选中了相同的复选框,而容器的结果不同。\”在卷轴上重绘\”的覆盖层不见了,用于绘画的绿色覆盖层也不见了。您可以看到滚动条上的油漆覆盖层,以显示它处于活动状态。
结论:在应用容器时,确保在容器上应用某种形式的背景色,以获得所有好处。
以下是我用于测试的内容:CodePen Embed Fallbackdiv>h3This is the bottom of the pagep>本文介绍了CSS***86***属性的基础及其值、优点和潜在的性能增益。将此属性应用于HTML中的某些元素有一些非常好的好处;哪些元素需要应用此属性取决于您自己。至少,这是我收集的,因为我不知道任何具体的指导。其基本思想是将其应用于作为其他元素容器的元素,特别是那些具有某种形式的动态方面的元素。
一些可能的场景:CSS网格的网格区域、包含第三方内容的元素以及具有基于用户交互的动态内容的容器。在这些情况下,如果您不试图包含一个元素,而该元素实际上在某种程度上依赖于该包含之外的另一个元素,那么在这种情况下使用该属性应该不会有任何危害。
浏览器支持非常强。Safari是目前唯一一家坚持的公司。不管怎样,您仍然可以使用该属性,因为如果浏览器不理解该属性或其值,它只需跳过该代码而不会出错。
因此,请随意开始包含您的内容!

让我们深入研究一下CSS包含属性 为WP2原创文章,链接:https://www.wp2.cn/css/%e8%ae%a9%e6%88%91%e4%bb%ac%e6%b7%b1%e5%85%a5%e7%a0%94%e7%a9%b6%e4%b8%80%e4%b8%8bcss%e5%8c%85%e5%90%ab%e5%b1%9e%e6%80%a7/