1、浏览器重绘与回流的区别？ #

重排/回流（Reflow）：当 DOM 的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

回流：

1. 布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。

2. 改变元素的位置和尺寸大小都会引发回流

重绘（Repaint）： 当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。

重绘：

1. 当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。

2. 回流必定会发生重绘，重绘不一定会引发回流。

2、如何触发重排和重绘？ #

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新 DOM 节点

• 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘

• 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化

• 移动或者给页面中的 DOM 节点添加动画

• 添加一个样式表，调整样式属性

• 用户行为，例如调整窗口大小，改变字号，或者滚动

3、如何避免重绘或者重排？ #

• 集中改变样式，不要一条一条地修改 DOM 的样式。
• 不要把 DOM 结点的属性值放在循环里当成循环里的变量。
• 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
• 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
• 尽量只修改 position：absolute 或 fixed 元素，对其他元素影响不大
• 动画开始 GPU 加速，translate 使用 3D 变化

本章节来自 LeetBook - 力扣（LeetCode）