文章目录
  1. 1. 比较与实例
    1. 1.1. 空间占据:
    2. 1.2. 前端性能:
    3. 1.3. 对子元素的影响:
    4. 1.4. 是否加载?

在使用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

1
2
3
<div id="test1">
<span id="test2"></span>
</div>

CSS

1
2
3
4
#test2 {
background-image: url('mypic.jpg');
display: none;
}

在jsfiddle上试了以上代码没有图片,但是可以通过Chrome开发者工具观察到,是否发送了加载图片的请求
display:none
答案是 YES。


Q2:页面加载完毕后,浏览器会下载“mypic.jpg”图片吗?

HTML

1
2
3
<div id="test1">
<span id="test2"></span>
</div>

CSS

1
2
3
4
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}

display:none
答案是 YES。


Q3:页面加载完毕后,浏览器会下载“mypic.jpg”图片吗?

HTML

1
2
3
<div id="test1">
<span id="test2"></span>
</div>

CSS

1
2
3
4
5
6
7
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}

display:none
答案是 NO。

经试验可猜测:样式中带有 display:none 和 visibility:hidden 的元素会被加载
不过display:none的子元素不会被加载。


参考文献:
[1] 现代浏览器的工作原理
[2] 浏览器的渲染原理简介
[3] 您可能不知道的CSS元素隐藏“失效”以其妙用
[4] Front End Web Development Quiz

文章目录
  1. 1. 比较与实例
    1. 1.1. 空间占据:
    2. 1.2. 前端性能:
    3. 1.3. 对子元素的影响:
    4. 1.4. 是否加载?