扒一扒为啥面试官要问我们隐藏元素有几种方法

也许，你们在面试的时候，被问到过，隐藏元素有几种方法？
我总结了一下，不保证全面，有下列几种方法：

• visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
• opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明
• position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
• display: none; 元素会变得不可见，并且不会再占用文档的空间。
• transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
• HTML5 属性,效果和 display:none;相同，但这个属性用于记录一个元素的状态
• height: 0; 将元素高度设为 0 ，并消除边框
• filter: opacity(0%); CSS3 属性，将一个元素的透明程度设置为 0

站在面试官的角度（没当过，我瞎想的），
首先，考察你对CSS属性的了解
其次，进一步询问它们的区别，考察你对页面结构的理解
最后，页面结构改变会影响什么，重排和重绘啊。

渲染机制

简单看一下渲染机制，了解下重排和重绘。

1. 渲染引擎解析HTML文档，并将各标记转化成DOMTree上的DOM节点
2. 同时进行解析外部CSS以及样式内部的样式数据，形成Style Rules
3. DOMTree和Style Rules合并在一起创建另一种树结构 Render Tree
4. Render Tree构建完成后，进入Layout，也就是为每个节点分配一个出现在屏幕上的确切坐标
5. 最后进入Painting，最后遍历一遍Render Tree，根据样式规则将节点绘制到确定坐标上
6. 呈现在屏幕上

重排（也称回流）

一些改变导致DOM Tree的变化，需要重新计算每个节点在屏幕上的位置，这就是Reflow（重排），同时重排一定导致重绘。
一些会导致重排的操作：

• ADM DOM节点，会导致Reflow或Repaint
• 移动DOM位置
• 修改CSS样式，改变大小，激活伪类
• Resize窗口或者滚动
• 修改默认字体（代价很大）
• 一些常用且会导致回流的属性和方法：
  clientWidth、clientHeight、clientTop、clientLeft
  offsetWidth、offsetHeight、offsetTop、offsetLeft
  scrollWidth、scrollHeight、scrollTop、scrollLeft
  scrollIntoView()、scrollIntoViewIfNeeded()
  getComputedStyle()
  getBoundingClientRect()
  scrollTo()

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为Repaint（重绘）。
一些会导致重绘的操作：

• DOM改动（Reflow一定引起Repaint）
• CSS改动

如何减少重排重绘

重排重绘在大部分时候是不可避免的，在性能消耗方面，重绘还好，重排较大，尤其页面元素过多后，会造成更大的性能损耗。所以减少重排重绘是很有必要。

CSS:

• 避免使用table布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。
• 避免使用CSS表达式，calc，涉及计算
• 使用position：absolute|fixed 或者float 布局要操作的元素脱离文档流
• Flex布局，不明白什么原理，但是测试过，发现是可以减少重排的

JavaScript:

• 避免多次操作样式，一次性写入style，或者修改class
• 避免多次操作DOM，可以多使用documentFragment
• 避免频繁读取会引发回流重绘的属性，获取及时保存吧
• 进行动画时，使用transform 动画由GPU线程控制，不占用用来渲染和执行JS的主线程，支持硬件加速

这些方法的区别和各自影响

visibility: hidden、opacity: 0、filter: opacity(0%)这几个属性都将元素隐藏，但它占的位置还在那里，所以不涉及重排
display: none、 height: 0改变元素的布局，会造成重排
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外，这可以只会造成absolut布局内的元素重排而不是整体， 减少重排
transform: scale(0) 由GPU线程控制，支持硬件加速
比较推后面两种隐藏方式。

请大家一定保持批判思维观看，网上的信息不一定完全正确，毕竟你永远不知道在写文章的人是兔子还是咸鱼！