兼容性

CSS contain 提高页面的渲染性能_php

使用方法

contain: none;
contain: strict;
contain: content;
contain:

CSS contain 提高页面的渲染性能_热力图_02

尺寸限制 Size Containment

这里的“尺寸限制”指的是内部元素的变化不会影响当前元素尺寸的变化。

CSS contain 提高页面的渲染性能_php_03

布局限制 LayoutContainment

CSS contain 提高页面的渲染性能_热力图_04

样式生成限制 StyleContainment

CSS contain 提高页面的渲染性能_热力图_05

<div></div>
body {
    counter-reset: n 2;
}
div {
    contain: style;
    counter-reset: n;
}
div::before, div::after {
    content: counters(n, '.') " ";
}
div::after {
    counter-increment: n 2;
}

CSS contain 提高页面的渲染性能_css_06


效果见 ​​https://demo.cssworld.cn/new/13/7-2.php​​

CSS contain 提高页面的渲染性能_前端_07

渲染限制 PaintContainment

CSS contain 提高页面的渲染性能_热力图_08


CSS contain 提高页面的渲染性能_css_09