【CSS】display:none 和 visibility:hidden 有何区别?
更新日期:
在使用CSS隐藏一些元素时,常常用到 display:none 和 visibility:hidden
两者差别在哪儿?
比较与实例
空间占据:
display:none
隐藏后的元素不占据任何空间。它的宽度、高度等各种属性值都将“丢失”。
visibility:hidden
隐藏的元素空间依旧存在。它仍具有高度、宽度等属性值。
在线演示实例:
前端性能:
display:none
会触发reflow。
visibility:hidden
只会触发repaint,因为没有发现位置变化。
什么是reflow和repaint?:
浏览器渲染时,JavaScript动态修改了DOM属性或是CSS属性会导致重新Layout,
有些改变不会,比如CSS rule没有被匹配到,等
这里比较重要的两个概念是 reflow(回流) 和 repaint(重绘)他们不是一回事。
- Repaint——屏幕的一部分要重画,比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
- Reflow——意味着元件的几何尺寸变了,我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow,或是Layout。(HTML使用的是flow based layout,也就是流式布局,所以,如果某元件的几何尺寸发生了变化,需要重新布局,也就叫reflow)reflow 会从这个root frame开始递归往下,依次计算所有的结点几何尺寸和位置,在reflow过程中,可能会增加一些frame,比如一个文本字符串必需被包装起来。
详情请看:浏览器的渲染原理简介
对子元素的影响:
display:none
一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。
visibility:hidden
给一个父元素应用visibility:hidden,则其子孙后代也都会全部不可见。不过存在隐藏“失效”的情况。当其子孙元素应用了visibility:visible,那么这个子孙元素又会显现出来。
是否加载?
Q1:页面加载完毕后,浏览器会下载“mypic.jpg”图片吗?
HTML
|
|
CSS
|
|
在jsfiddle上试了以上代码没有图片,但是可以通过Chrome开发者工具观察到,是否发送了加载图片的请求
答案是 YES。
Q2:页面加载完毕后,浏览器会下载“mypic.jpg”图片吗?
HTML
|
|
CSS
|
|
答案是 YES。
Q3:页面加载完毕后,浏览器会下载“mypic.jpg”图片吗?
HTML
|
|
CSS
|
|
答案是 NO。
经试验可猜测:样式中带有 display:none 和 visibility:hidden 的元素会被加载
不过display:none的子元素不会被加载。
参考文献:
[1] 现代浏览器的工作原理
[2] 浏览器的渲染原理简介
[3] 您可能不知道的CSS元素隐藏“失效”以其妙用
[4] Front End Web Development Quiz