在`HTML`中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

回流

DOM树中的元素被增加或者删除，导致浏览器需要重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流。

DOM树没有元素增加或删除，只是样式的改变，针对浏览器对某一元素进行单独的渲染，这个过程就叫做重绘

重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流

1.添加或者删除可见的DOM元素

2.元素位置改变——display、float、position、overflow等等

3.元素尺寸改变——边距、填充、边框、宽度和高度

4.内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变

5.页面渲染初始化

1.使⽤ transform 替代 top

2.不要把节点的属性值放在⼀个循环⾥当成循环⾥的变量。

3.避免使⽤ table 布局，可能table 中每个元素的⼤⼩以及内容的改动会造成整个 table 的重新布局。

4.对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离⽂档流，从⽽减少对其他元素的影响

5.把 DOM 离线后修改。如：使⽤ documentFragment 对象在内存⾥操作 DOM。我们还可以通过通过设置元素属性display: none，将其从页⾯上去掉，然后再进⾏后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作