[软技能] 第1409天 有哪些操作会导致回流？

[haizhilin2013]

第1409天 有哪些操作会导致回流？

3+1官网

我也要出题

[ShihHsing]

页面回流（Reflow）是指在页面布局和几何属性发生变化时，浏览器需要重新计算元素的几何属性并重新构造渲染树的过程。页面回流比较消耗性能，因此需要尽量避免。
以下是常见的会导致页面回流的操作：

1. 修改页面的布局：比如改变窗口大小、改变元素的大小、位置、隐藏元素等。
2. 修改文档的内容：比如改变文字的字号、字体、颜色、样式等。
3. 查询某些元素的几何属性：比如调用 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight、scrollTop、scrollLeft 等属性和方法。
4. 修改某些样式属性：比如改变元素的字体大小、颜色、字体样式、背景颜色、盒模型属性（比如 padding、margin、border）、浮动等。
5. 计算某些属性值：比如调用 getComputedStyle 等计算某些属性的值。

要尽量避免页面回流，可以采取以下措施：

1. 尽量避免频繁修改元素的样式，可以将需要修改的样式放到一起进行批量操作。
2. 避免频繁查询元素的几何属性，可以将需要查询的属性缓存起来。
3. 将需要频繁修改的元素使用绝对定位脱离文档流，避免对其他元素的影响。
4. 对于动画效果，可以使用 position: fixed 或 position: absolute 的元素来实现，避免对其他元素的影响。
5. 使用 CSS3 的 transform 和 opacity 等属性来实现动画效果，避免频繁修改元素的位置和大小。