display:none和visibility:hidden 以及repaint(重绘)和reflow(渲染)

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间

repaint(重绘)

repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,backgroundcolor,不会影响到dom结构渲染。

reflow(渲染)

与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
所以display:none才会产生reflow visibility:hidden只会出发repaint

你可能感兴趣的:(css)