visibillity和display：none产生的回流和重绘

Posted 2021-06-11 coderwhytop

visibility:hidden会保留元素的空间，仅为视觉上的完全透明（看不见、摸得着）
display:none不为被隐藏的对象保留其物理空间（看不见摸不着）

何为重绘（repaint）
repaint发生的时候，元素的外观会被改变，且在没有改变布局的情况下发生，如改变：
outline、visibility、backgroundcolor
不会影响到dom结构的变化，此时只发生repaint
何为渲染(reflow)
峪repaint的区别在于他会影响到dom结构的渲染，同时会触发repaint，会改变本子和所有父辈元素（祖先），这种开销很昂贵，会导致性能下降，而且页面元素越多，效果约明显。

在这里，display：none会发生reflow；而visibility：hidden只会触发repaint。