一、常用方法的性能及区别
1.display:none
不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。具体表现如下：
1.DOM结构，浏览器不会渲染display:none的元素，不占据空间；
2.事件监听：无法进行DOM事件监听；
3.性能：动态改变此属性会引起重排，性能较差；
4.继承：不会被子元素继承，毕竟子类也不会渲染；
5.transition：transition不支持display。
2.visibility: hidden
使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。具体表现如下：
1.DOM结构：被渲染，但是被隐藏，会占据空间；
2.事件监听：无法进行DOM事件监听；
3.性能：动态改变此属性会引起重绘，性能较高；
4.继承：会被子元素继承，子元素可以通过设置visibility:visible来取消隐藏；
5.transition：visibility会立即显示，隐藏时会延时。
3.opacity: 0
与visibility: hidden相似，使对象在网页上不可见，但该对象在网页上所占的空间没有改变，但是可以进行DOM事件监听，visibility：hidden不可以,通俗来说就是看不见但是摸得着。具体表现如下：
1.DOM结构：透明度为100%，元素被隐藏，会占据空间；
2.事件监听：可以进行DOM事件监听；
3.性能：提升为合成层，不会引起重绘，性能较高；
4.继承：会被子元素继承，子元素并不能通过opacity:1来取消隐藏；
5.transition：opacity可以延迟显示和隐藏。
二、结合代码与页面解释
CSS隐藏元素的方法及区别
div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
.div1 {
display: none;
}
.div2 {
visibility: hidden;
}
.div3 {
opacity: 0;
}
function test(data) {
alert(data)
}
1、不添加隐藏方式
不添加隐藏
2、display:none
未保留物理空间，无法进行事件监听
display:none
3、visibility: hidden
保留物理空间，无法进行事件监听
visibility: hidden
4、opacity: 0
保留物理空间，可以进行事件监听
opacity: 0
opacity: 0
三、隐藏的拓展方法
(1)position
position:absolute 设置元素的position与left，top，bottom，right等，将元素移出至可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。
(2)transform
transform:rotatex(90deg)或 transform:rotateY(90deg)，与opacity: 0相似，但无法进行事件监听。
(3)通过z-index隐藏
