回流是浏览器重新计算元素几何属性并重建渲染树的过程，重绘是仅更新样式而不改变布局的视觉刷新；回流必触发重绘，但重绘不一定触发回流。
什么是回流（reflow）和重绘（repaint）
回流是浏览器重新计算元素几何属性（位置、尺寸）并重建渲染树的过程，触发条件包括读取 offsetTop、clientWidth、getComputedStyle() 等；重绘是样式变化但不改变布局时的视觉更新，比如改 color 或 background-color。回流必然触发重绘，但重绘不一定触发回流。
避免强制同步回流的写法
常见错误是“读-改-读”模式，在一次 JS 执行中多次触发回流。比如循环中反复读取 element.offsetWidth 再修改 style.left，浏览器被迫同步计算每次读取值，性能断崖式下降。
- 把所有读操作集中到修改前，所有写操作集中到后面
- 用
documentFragment批量操作 DOM，再一次性 append 到真实节点 - 用
getBoundingClientRect()替代多个 layout 属性访问，它返回一个缓存快照 - 对频繁动画元素，用
transform和opacity替代top/left或visibility，它们能走合成层（compositor layer），避开回流
const el = document.getElementById('box');
// ❌ 危险：三次强制回流
el.style.left = '10px';
console.log(el.offsetWidth); // 触发回流
el.style.top = '20px';
console.log(el.offsetHeight); // 再触发
el.style.width = '200px';
// ✅ 安全：先读后写
const rect = el.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
el.style.cssText = `transform: translate(10px, 20px); width: 200px;`; // transform 不触发回流
批量 DOM 更新与 CSS 类切换
直接操作 style 属性会绕过 CSS 引擎优化，且难以复用；而切换 class 可由浏览器批量合并样式计算，也便于利用 CSS 的硬件加速特性。
- 避免在循环中逐个设置
el.style.xxx = yyy - 用
classList.add()/classList.toggle()控制状态类，样式定义统一收口在 CSS 文件里 - 对需要动态计算样式的场景，优先用 CSS 自定义属性（
--my-var），再通过element.style.setProperty()更新，比逐项赋值更轻量 - 动画场景下，给元素添加
will-change: transform（谨慎使用，仅对真正要动的元素）可提前提示浏览器创建合成层
监听 scroll / resize 时的节流与图层分离
scroll 和 resize 事件高频触发，若回调里含 DOM 读写，极易造成卡顿。关键不是简单加 throttle，而是把「测量」和「更新」彻底解耦。
立即学习“Java免费学习笔记（深入）”；
- 用
requestAnimationFrame()包裹读取逻辑（如获取滚动位置），确保在下一帧开始时执行 - 把 DOM 更新逻辑放在另一个
requestAnimationFrame回调中，实现读写分离 - 对吸顶、视差等效果，用
position: sticky或transform: translateY()替代 JS 实时计算 top 值 - 避免在 scroll 回调里调用
getComputedStyle(el)—— 它是典型的同步回流诱因
最常被忽略的一点：即使你用了 transform，如果元素父容器有 overflow: hidden 或 filter，仍可能破坏合成层，导致降级回软件渲染。是否真正触发硬件加速，得看 Chrome DevTools 的 Layers 面板。
