CSS contain新特性如何控制页面重绘与重排
CSS的contain属性是一个比较新的特性，它可以用来控制元素的重绘和重排，从而提高页面的性能。contain属性有4个值，分别是：
- none
- strict
- content
- size
本文将详解CSS contain新特性的各个值的含义以及它们如何控制页面的重绘和重排。
1. none
contain:none表示当前元素不对其它元素产生任何影响，也不受其它元素的影响。这个值类似于将元素放在了一个独立的环境中，它不会参与到父级元素的排版、重绘和重排中。
例如，一个使用了contain:none的元素，当它的某个属性变化时，它会重新构建整个元素的样式和布局，而不会影响到其它元素。
.box {
contain: none;
}
当这个元素中的某个属性发生变化时，它会触发整个元素的重绘和重排，而不会影响到其它元素。这种情况下，将元素的contain属性设置为none并不会有任何性能提升。
2. strict
contain:strict表示当前元素的布局和样式不会被其它元素所影响，并且当前元素也不会影响到其它非严格包含关系的元素。
这个值可以用来优化一些特殊的布局，例如，将某个元素设置为contain:strict可以使得该元素不重排页面和不重绘，从而提高页面的性能。
例如，一个使用了contain:strict的元素，当它的某个属性变化时，它只会影响到它内部的元素，而不会影响到其它非严格包含关系的元素。
.box {
contain: strict;
}
如果我们需要对一个元素进行一些比较耗费性能的操作，比如动画效果，可以将这个元素的contain属性设置为strict，从而避免它对其它元素的操作产生性能影响。
3. content
contain:content表示当前元素的内容不会影响到其它元素的布局和样式，但是当前元素的样式仍然可以被其它非contain元素所影响。
这个值可以用来优化一些局部的布局，例如，在一个大型页面中，将一些不经常发生变化的元素的contain属性设置为content，可以减少页面的重绘和重排，从而提高页面的性能。
例如，一个使用了contain:content的元素，当它的某个属性变化时，它只会影响到它内部的元素，而不会影响到其它元素。
.box {
contain: content;
}
这种情况下，将元素的contain属性设置为content可以有效地减少页面的重绘和重排，提高页面的性能。
4. size
contain:size表示当前元素的尺寸不受其它非size元素的影响，但是它仍然会影响到其它元素的布局和样式。
这个值可以用来优化一些可以预测尺寸的元素，例如，当我们知道一个元素的尺寸将不会发生变化时，可以将它的contain属性设置为size，从而避免它对其它元素的布局和样式产生影响。
例如，一个使用了contain:size的元素，当它的尺寸变化时，它会重新构建整个元素的样式和布局，但是不会影响到其它非size元素的布局和样式。
.box {
contain: size;
}
这种情况下，将元素的contain属性设置为size可以有效地减少页面的重绘和重排，提高页面的性能。
总结
CSS的contain属性可以用来优化页面的性能，它可以控制元素的重绘和重排，从而减少页面的性能损失。
contain属性有四个值，分别是none、strict、content和size，使用时需要根据不同的场景进行选择。其中，none表示元素不产生影响，strict表示元素不受其它元素的影响，content表示元素的内容不影响其它元素的布局和样式，而size表示元素的尺寸不受其它非size元素的影响。
因此，在实际项目开发中，我们可以根据具体的场景和需求，选择合适的contain属性，从而达到优化页面性能的目的。