什么是重排？如何减少重排？

什么是重排？

重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

什么时候会发生

重排(又叫回流)
  这一阶段主要是计算节点的位置和几何信息，当页面布局和几何信息发生变化时，就需要重排。
  引起重排的几种情况：

页面初始化的时候
DOM结构数的变化：添加或者删除可见的DOM元素
DOM元素的几何属性发生变化：外边距、内边距、边框厚度、宽高等
内容发生变化：文本的增加或减少、更换不同尺寸的图片
浏览器窗口尺寸改变(重排是根据视口的大小来计算元素的位置和大小的)
窗口属性的获取和尺寸改变：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

一些常用的减少重排方法：

1.使用类名批量修改样式：将要进行样式更改的元素添加/删除CSS类，而不是直接操作样式属性，可以将多个更改合并到一次重排和重绘中。

2.使用文档片段：如果需要频繁地向页面中添加大量DOM节点，可以先将他们添加到文档片段中，最后再统一插入文档中，这样可以减少回流的次数。

3.避免频繁查询布局信息：在JavaScript中避免频繁查询布局信息，如‘offsetWidth'和’offsetHeight

4.使用CSS Grid和Flex布局：使用Grid和Flex布局可以减少对元素位置的频繁调整，从而减少重排

5.使用CSS动画和过渡：在需要实现动画效果时，使用CSS动画和过渡，而不是JavaScript来操作元素样式。

6.使用GPU加速提升网站的动画渲染性能：transform:translateZ(0);或transform：translate3d(0,0,0)