contain 是什么？

contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

contain 如何用？

contain 的所有可能取值以及语法：

/** 不可继承 */
contain: none | strict | content | [ size || layout || style || paint ];none /** 默认值， 表示元素将正常渲染，没有包含规则。*/
strict /** 表示除了 style 外的所有的包含规则应用于这个元素。等价于 contain: size layout paint。。*/
content /** 表示这个元素上有除了 size 和 style 外的所有包含规则。等价于 contain: layout paint。*/
size /** 表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸。 */
layout /** 表示元素外部无法影响元素内部的布局，反之亦然。 */
style /** 表示那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内。*/
paint /** 表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。 */

1. contain: strict | contain: content

这两个是聚合效果：

contain: strict：同时开启 layout、style、paint 以及 size 的功能，它相当于 contain: size layout paint
contain: content：同时开启 layout、style 以及 paint 的功能，它相当于 contain: layout paint

2. contain: size

设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。

.container {width: 300px;padding: 10px;border: 1px solid red;
}

也就是说，默认情况下（none），父元素的高度会因为子元素的增多而被撑高：

.container {width: 300px;padding: 10px;border: 1px solid red;
+   contain: size
}

而 contain: size 的作用是使得子元素的变化不再影响父元素的样式布局。

对于设置contain: size的元素，它是在正常文档流中占据位置，子元素浮于正常文档流之下。

3. contain: layout

使用 contain：layout，开发人员可以指定对该元素任何后代的任何更改都不会影响任何外部元素的布局，反之亦然。因此，浏览器仅计算内部元素的位置（如果对其进行了修改），而其余DOM保持不变。因此，这意味着帧渲染管道中的布局过程将加快。

值得注意的是，由于元素内部发生了大小等能触发回流的属性样式变化时 layout 属性将不生效。

对于设置contain: layout，观感上它与 position：relative 并无区别，都是在正常文档流中占据位置，且子元素浮于正常文档流之上。

5. contain: paint

使用 contain：style 表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样它的子孙节点不会被显示。

这个特点有点类似与 overflow: hidden，也就是明确告知用户代理，子元素的内容不会超出元素的边界，所以超出部分无需渲染：

没有启用 contain：style：

启用 contain：style：

利用CSS 的新特性 contain，提高渲染性能相关推荐

html5不支持硬件加速,CSS开启硬件加速来提高网站性能-HTML5综合
CSS开启硬件加速来提高网站性能-HTML5综合本文由文梅画史于 2016-1-28 5:09 发布在 HTML5综合在桌面端和移动端用CSS开启硬件加速 CSS animations, tr ...
vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性，样式穿透，插槽选择器，全局选择器，在vue3中使用tailwindcss
一.vue3.x 样式新特性样式穿透深度选择器 <style scoped> .a :deep(.b) {/* ... */ } </style> 插槽选择器 <s ...
如何通过CSS开启硬件加速来提高网站性能
你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
利用 Domino V8 新特性开发 Mashup 应用(转载)
Domino 8 在万众瞩目中已正式发布,其除了在邮件.服务器管理灵活性.性能改进.安全性增强等方面有了长足的进步之外,在软件设计中赋予系统更多的开放性和互操作性.面对业界流行的 SOA.Web 2. ...
黑马程序员云道页面—巩固html和css（新特性没有使用）
注意: 一.写的是黑马程序员跟着老师写的,有点小差别,主要看注释理解结构二.以前学thml和css没有深入理解到盒子的坍塌问题,注意理解外边距的合并.有两种情况,一个是两个盒子紧挨着一起,会进行外边 ...
java expires_利用Apache配置http expires值提高网站性能
HTTP头中有个expires参数,设置一个未来的时间,在这时间以前,浏览器会先从cache读取,如果没有再从服务器中读取.对于像图片,css,script等静态内容,只需发一次http reques ...

利用CSS 的新特性 contain，提高渲染性能