display和visibility与重排和重绘

display:none和visibility:hidden都能把网页上某个元素隐藏起来，但是两者有区别：

1、display:none

1、不为被隐藏的对象保留其物理空间。html对象在页面上彻底消失（display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间）。

2、是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子孙节点，属性无法显示。

3、修改常规文档流元素的display通常会造成文档的重排（reflow）重绘（repaint）。

2、visibility:hidden

1、为隐藏的对象保留其物理空间，html对象仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在（visibility:hidden不会让元素从渲染树中消失，渲染树元素继续占据空间，只是内容不可见）。

2、是继承，子孙节点消失由于继承了hidden，通过visibility:visible可以让子孙节点显示。

3、修改visibility属性只会造成文档的重绘（repaint）。

3、重排：

无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。

4、重绘：

通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

5、减小重排重绘

        使用类名来操作样式

        多次使用同一个offsetWidth时，可以用变量存储起来再使用，或者创建节点时，可以利用document.createDocumentFragment()在内存中添加要被添加的节点，处理完之后再插入到实际 DOM 中。

        修改样式时，可以先隐藏元素，修改完成后再显示即可