优化JS性能：减少重绘回流方法

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《优化JavaScript性能：减少重绘回流技巧》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

回流是浏览器重新计算元素几何属性并重建渲染树的过程，重绘是仅更新样式而不改变布局的视觉刷新；回流必触发重绘，但重绘不一定触发回流。

什么是回流（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，而是把「测量」和「更新」彻底解耦。

• 用 requestAnimationFrame() 包裹读取逻辑（如获取滚动位置），确保在下一帧开始时执行
• 把 DOM 更新逻辑放在另一个 requestAnimationFrame 回调中，实现读写分离
• 对吸顶、视差等效果，用 position: sticky 或 transform: translateY() 替代 JS 实时计算 top 值
• 避免在 scroll 回调里调用 getComputedStyle(el) —— 它是典型的同步回流诱因

最常被忽略的一点：即使你用了 transform，如果元素父容器有 overflow: hidden 或 filter，仍可能破坏合成层，导致降级回软件渲染。是否真正触发硬件加速，得看 Chrome DevTools 的 Layers 面板。

今天关于《优化JS性能：减少重绘回流方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！