display: none和visibility: hidden的区别
display: none和visibility: hidden的区别
三种隐藏的对比
display: none;
- DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
- 事件监听：无法进行 DOM 事件监听；
- 性能：动态改变此属性时会引起重排，性能较差；
- 继承：不会被子元素继承，毕竟子类也不会被渲染；
- transition：transition 不支持 display。
visibility: hidden;
- DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
- 事件监听：无法进行 DOM 事件监听；
- 性 能：动态改变此属性时会引起重绘，性能较高；
- 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
- transition：visibility 会立即显示，隐藏时会延时
opacity: 0;
- DOM 结构：透明度为 100%，元素隐藏，占据空间；
- 事件监听：可以进行 DOM 事件监听；
- 性 能：提升为合成层，不会触发重绘，性能较高；
- 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
- transition：opacity 可以延时显示和隐藏
display: none 和 visibility: hidden 都可以用于隐藏元素，但它们的行为和效果有一些重要的区别：
display: none
- 效果：元素从页面中完全移除。它不占据任何空间，也不会影响页面的布局。
- 布局：元素及其子元素都不会占据任何空间。页面的布局会重新计算，就好像这个元素从未存在过一样。
- 交互：元素无法被用户点击，也无法通过键盘导航等方式获得焦点。
- 影响：元素被完全从文档流中移除，对页面的视觉布局和交互都有显著影响。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="hidden">This is hidden</div>
<div>This is visible</div>
</body>
</html>
visibility: hidden
- 效果：元素仍然存在于页面中，但不可见。它仍然占据空间。
- 布局：元素及其子元素仍然占据空间，只是不可见。页面的布局不会改变，元素仍然会占据其应有的空间。
- 交互：元素无法被用户点击，也无法通过键盘导航等方式获得焦点，但它占据的空间仍然存在，可能会影响其他元素的交互。
- 影响：元素不可见，但仍在文档流中，占据空间，对页面的布局没有影响。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<div class="hidden">This is hidden</div>
<div>This is visible</div>
</body>
</html>
对比总结
- 布局：
display: none：元素从页面中完全移除，不占据任何空间。visibility: hidden：元素不可见，但仍然占据空间。
- 页面重绘和重排：
display: none：由于元素被完全移除，页面会触发回流和重绘，完全移除元素。。visibility: hidden：页面只会触发重绘（repaint），不会触发重排。
- 动画和过渡：
display: none：在使用 CSS 过渡和动画时，不太容易实现，因为元素被完全移除。visibility: hidden：可以配合 CSS 过渡和动画实现隐藏和显示效果，因为元素仍然存在。
使用场景
- 使用
display: none：当你希望元素完全从页面中移除，不影响页面布局和交互时使用。 - 使用
visibility: hidden：当你希望元素不可见但仍然占据空间，保持页面布局不变时使用。
性能分析
display: none性能影响：- 优点：适用于希望元素完全从页面中移除的场景，比如切换视图、隐藏某些页面内容。
- 缺点：由于会触发回流，可能会导致性能瓶颈，尤其是在大量元素或频繁操作时。
visibility: hidden性能影响：- 优点：适用于希望元素不可见但仍然占据空间的场景。不会触发回流，仅触发重绘，相对开销较小。
- 缺点：虽然重绘的开销较小，但在频繁使用时仍然可能影响性能。
实践建议
- 避免频繁回流：尽量减少对布局的频繁操作。比如，可以通过批量操作 DOM 元素、减少样式变更的频率、使用文档片段（Document Fragment）等方式优化性能。
- 选择合适的隐藏方法：
- 使用
display: none：当需要完全移除元素，不再占用布局空间时。 - 使用
visibility: hidden：当仅需要隐藏元素，但仍需保持其布局空间时。
- 使用
- 优化重绘：虽然重绘的开销较小，但在频繁操作时仍需要注意。可以通过减少样式变更、合并样式操作等方式优化。