探究元素隐藏的几种方式及其区别

前言

本文主要讲解前端元素隐藏的几种方式及它们之间有什么区别。

方式

display:none

语法格式：display:none
元素处理：页面渲染中直接删除该元素，在页面及其F12中该元素的id和空间都被清除，不占据任何空间。
布局影响：别的元素会占据display隐藏元素的位置。
注：隐藏后无法通过CSS选择器选择该元素。

visibility: hidden

语法格式: visibility:hidden
元素处理：仍占据空间，但内容不可见。
布局影响：隐藏元素仍然保留原空间位置。
注：无法通过CSS选择器选择该元素。

opacity: 0

语法格式：pacity:0
元素处理：仍占据空间，只是内容透明度为0.
布局影响：隐藏元素仍然保留原有的布局空间。
注：可通过CSS选择器选择该元素。

position: absolute; top: -9999px

语法格式：position:absolute;top:-9999px;
元素处理：定位到屏幕上方位置，使其不可见。
布局影响：隐藏元素仍然保留原有布局空间。
注：注意父级定位设置，可能影响其他元素布局。

JavaScript操作样式

可以使用**document.getElementById(‘ElementId’).style.display=“none”**使其元素不可见，或使用setAttribute(‘hidden’, true)进行隐藏。

区别

重排重绘会影响前端性能，这里主要根据它们是否重排重绘来区分它们的区别。

概念

重排：浏览器根据DOM结构和CSS样式计算元素的几何属性（位置、尺寸等），并确定它们在页面中的精确位置。当发生重排时，浏览器会重新计算每个受影响元素的布局信息，并更新渲染树。重排可能会引起其他元素的移动、调整大小或重新绘制。

重绘：浏览器根据最新的样式信息对已布局的元素进行重新绘制。在重绘阶段，浏览器会将元素的可视外观（比如背景颜色、文本颜色等）应用到屏幕上。重绘不会改变元素的布局信息，只是重新绘制元素的可视外观。

在性能方面，重排对网页的影响通常比重绘更显著。因为重排会重新调用整个渲染树，期间可能发生卡顿感或闪烁的效果。重绘只是对颜色样式进行重新绘制，没有占用太多的资源。

它们是否重排重绘

display：none会导致重排，因为它已经被渲染树移除，移除后，将不会发生重绘。
visibility: hidden不会导致重排，因为它们并没有改变原有渲染布局，但是会导致重绘。因为元素可见性被更改。
opaticy: 0不会导致重排，因为它们并没有改变原有渲染布局，但是会导致重绘。因为元素透明度被更改。
position会导致重排，因为它们布局发生改变，同时它们会导致重绘，因为它们的元素位置被修改。

在不同的场景下使用不同的隐藏元素方式。