display: none

• Render Tree：初始化时设置 display: none Render Tree 中不渲染。

• 布局：会改变页面布局，元素脱离文档流，但 DOM Tree 中不会消失，可以用 JS 操作。

• 事件监听：父子元素绑定的事件都无法触发

• 性能：dispaly: block 引起回流与重绘，性能较差

• 继承：不会被子元素继承，因为子元素不会被渲染

• transition：不支持 display

opacity: 0

• Render Tree：初始化时设置 opacity: 0 Render Tree 中会渲染。

• 布局：不会改变页面布局

• 事件监听：父子元素绑定的事件都可以触发

• 性能：提升为合成层后，连重绘都不会触发，性能最好。 对于应用了transition或者animation的opacity元素，浏览器会将渲染层提升为合成层 也可以使用translateZ(0)或者translate3d(0,0,0)来人为地强制性地创建一个合成层。

• 继承：会被子元素继承，但子元素设置opacity: 1无效

• transition：支持opacity，显示和隐藏有过渡效果

visibility: hidden; 不会改变页面的布局。

• Render Tree：初始化时设置 visibility: hidden Render Tree 中会渲染。

• 布局：不会改变页面布局

• 事件监听：元素绑定的事件无法触发

• 性能：只会引起重绘，性能较好

• 继承：会被子元素继承，子元素可以设置visibility: visible来取消隐藏，之后父子元素

• 父元素绑定的事件不触发，子绑定的事件会触发(然后会冒泡到父元素触发父元素的事件)

• transition：支持 visibility，但显示和隐藏都没有过渡效果。visibility 是离散值， 0(hidden) 表示隐藏，1(visible) 表示完全显示，非 0 表示显示。从隐藏到显示，由于非 0 就是显示，那么从值从 0 到 1 的过程中，实际上是从隐藏直接切换到显示的状态，因此并没有 变化过程；从显示到隐藏，从 1 到 0 的过程中，在 0 的时候瞬间切换到隐藏，因此效果 依然没有变化过程。