display:none、visibility:hidden、opacity:0 区别

	display:none	visibility:hidden	opacity:0
DOM结构	浏览器不会渲染，会让元素完全从渲染树中消失，渲染时不占任何空间	元素不会在渲染树上消失，继续占据空间，只是内容不可见	透明度为100%，不会在渲染树上消失，占据空间，内容不可见
事件监听	无法监听，不能点击	无法监听，不能点击	可以监听，可以点击
性能	修改元素会造成文档重绘与重排，读屏器不会读取元素内容，消耗较大	修改只会造成本元素的重绘，性能消耗较少；读屏器读取元素内容	提升为合成层，是重建图层，不和动画属性一起则不会产生重绘，性能消耗较少
继承	非继承属性，元素从渲染树上消失，造成子孙节点消失	继承属性，子孙节点消失是由于继承了visibility:hidden，子元素可以设置visibility:visible来取消隐藏	会被子元素继承，而且子元素不能通过设置opacity:1来取消隐藏
transition	不支持display	支持，visibility会立即显示，隐藏时会延迟	支持，opacity可以延时显示和隐藏

CSS隐藏页面元素方法

1. 上面说的三种方式；
2. fixed设置足够大负的left、top值；
3. 使用层叠关系z-index；
4. 文字可以使用text-indent隐藏。

重排与重绘

• 重排：重新生成布局，重新排列元素；
• 重绘：某些元素的外观被改变，重新绘制元素。

重绘不一定导致重排，但重排一定会导致重绘。

重排

当DOM的变化影响了元素的几何信息（元素的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在页面中的正确位置，这就是重排的过程，也叫做回流，会重新生成布局，重新排列元素。

发生重排的情况

• 页面初始渲染，这是开销最大的一次重排；
• 添加或删除可见的DOM元素；
• 改变元素位置、尺寸（边距、填充、边框、宽度和高度）、元素内容、元素字体大小；

offsetWidth也会触发重排，为什么呢？这就要提到浏览器的性能优化方案了。由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。而获取布局信息的时候，会强制刷新队列，因为该方法需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。

发生重绘的情况

color、visibility、backgroud、border-style等等

减少重排次数

1. 样式集中改变
2. 分离读写操作
3. DOM离线
4. 使用absolute或fixed脱离文档流
5. 优化动画GPU（合成层）

参考链接：

1. opacity: 0、visibility: hidden、display: none 优劣和适用场景，以及隐藏元素的几种方法 (opens new window)
2. 重排(reflow)和重绘(repaint) (opens new window)
3. 什么是重排、重绘,如何优化 (opens new window)