重绘和回流1 - 回流页面布局、几何属性改变时（尺寸、布局、display：none等），页面就需要回流。 2 - 重

1 - 回流

页面布局、几何属性改变时（尺寸、布局、display：none等），页面就需要回流。

2 - 重绘

一些只会影响元素的外观，风格，而不会影响布局的属性（background-color等）改变时，就会触发重绘

3 - 回流和重绘的关系

①回流必将引起重绘

②而重绘不一定会引起回流

=> 回流的代价高于重绘

4 - 减少重绘和回流

1 - 使用cssText 或修改css的class

const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';


// 上面代码可优化为
const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

const el = document.getElementById('test');
el.className += ' active';

2 - 使用文档片段(document fragment)

将多次DOM操作合并为一次DOM操作

3 - 复杂动画使用绝对定位

对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流

重绘和回流