display:none和visibility:hidden的区别

display:none 和 visibility:hidden的区别

一、空间占据

• dispaly:none 隐藏后的元素不占据任何空间
• visibility:hidden 隐藏的元素空间依然存在

二、回流与重绘

• display:none 隐藏产生重绘 ( repaint ) 和回流 ( relfow )
• visibility:hidden 不会产生重绘和回流

三、株连性

• 一旦父元素使用 display:none 父节点和子孙节点元素全都不可见
• 父元素使用 visibility:hidden ,子孙节点元素可以设置 visibility:visible 是可见

补充

（1）回流：当 render 树的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，叫做回流。

（2）重绘：当颜色、背景颜色等发生变化不会引起页面发生变化，只需要进行重新渲染的过程，叫做重绘。例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。
（3）什么会引起回流？

   1. 页面的渲染和初始化，每个页面至少有一次回流
   2. DOM的结构发生变化，比如添加、删除元素(回流+重绘)
   3. render 树变化，比如 padding的减少
   4. 窗口的 resize 事件
   5. 获取某些属性，eg：offsetTop，offsetLeft，width，height
   6. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

（4）如何避免回流？

   1. 避免逐项更改样式
   2. 避免循环 DOM
   3. 避免多次读取 offsetLeft，offsetTop 等属性
   4. 将复杂的元素设置绝对定位或固定定位，使它脱硫文档流

补充：
回流必将引起重绘，而重绘不一定会引起回流。