共计 815 个字符，预计需要花费 3 分钟才能阅读完成。
什么是重排？
重排: 当渲染树的一部分必须更新并且节点的尺寸产生了变动，浏览器会使渲染树中受到影响的局部生效，并从新结构渲染树。
什么时候会产生
重排(又叫回流)
这一阶段次要是计算节点的地位和几何信息，当页面布局和几何信息发生变化时，就须要重排。
引起重排的几种状况：
页面初始化的时候
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)
