布局

浏览器中的 Reflow(回流)，又称为 Layout(布局)。

是指浏览器根据 DOM 树和样式计算信息，计算每个元素的几何属性（例如位置和大小）。然后将这些信息应用于渲染树中的每个可见元素的过程。display:none的节点没有几何属性

触发 Reflow 的操作

• 页面初次渲染: 当页面首次加载时，浏览器需要计算和绘制整个页面的结构和样式，这会引发一次全局的 Reflow 过程。

• DOM 结构变化: 当通过 JavaScript 动态修改了 DOM 结构（例如添加、删除、修改元素）、修改元素的几何属性（例如改变大小或位置）、修改样式（如修改 CSS 样式、计算属性值）, 这些变化可能会影响到其他元素的布局，从而触发 Reflow

• 页面尺寸变化:：当浏览器窗口大小改变时，所有依赖于视窗尺寸的元素都需要重新计算其位置和大小，因此会引发 Reflow。

• 字体变化: 如果网页中使用了相对单位(如 em)，当页面字体大小变化时，所有依赖于字体大小的元素的计算也会重新触发 Reflow。

• 获取某些元素的几何属性： 例如通过 JavaScript 获取 offsetTop、offsetLeft、offsetWidth、offsetHeight 等属性，或者使用 getComputedStyle() 获取计算后的样式信息，浏览器可能会触发 Reflow。

优化 Reflow 的方法

• 缓存布局信息： 如果需要多次访问某个元素的几何属性，最好将这些值缓存起来，避免多次触发 Reflow。 `

• 批量修改样式: 避免在 JavaScript 中频繁修改样式属性。最好的方式是通过添加 CSS 类名 或者直接修改元素的样式，而不是通过 JavaScript 逐个属性地修改。

• 使用 DocumentFragment: 在向 DOM 中添加大量新节点时，可以使用 DocumentFragment 先构建这些节点，然后一次性添加到文档中，以减少 Reflow 的次数。

• 减少 Reflow 范围: 尽量减少影响 Reflow 的操作范围，只针对必要的部分进行修改，避免全局的 Reflow。

• 使用 transform 属性代替 top/left: 如果只需要改变元素的位置而不需要读取其位置信息，使用 CSS 的 transform 属性更高效，不会触发 Reflow。

  element.style.transform = `translate(${x}px, ${y}px)`;