优化DOM样式操作的核心是避免强制同步布局：用CSS类切换替代内联样式，批量读写分离，缓存计算样式，离线构建DocumentFragment后统一挂载。
DOM节点与样式关联的性能问题，核心在于浏览器如何响应JavaScript对元素结构或样式的修改——尤其是那些会触发重排（reflow）和重绘（repaint）的操作。优化关键不是“少改”，而是“改得聪明”：让样式变更更可预测、更集中、更贴近浏览器渲染节奏。
用CSS类切换替代内联样式操作
直接设置element.style.color = 'red'或element.style.width = '200px'会强制浏览器同步计算样式，尤其当涉及几何属性时极易引发重排。而通过添加/移除预定义CSS类，浏览器可在样式计算阶段批量处理，且支持硬件加速与缓存优化。
- 把常用视觉状态抽象为语义化类名，例如
.is-hidden、.is-active、.has-loading - 避免在循环中反复写
el.style.xxx，改用el.classList.toggle('state-class') - 动画类优先使用
transform和opacity，它们不触发重排，且能启用GPU合成
批量读写分离，避开强制同步布局
所谓“强制同步布局”，就是JavaScript在未完成样式写入前，就急着读取offsetHeight、getBoundingClientRect()等布局信息，迫使浏览器中断当前渲染队列、立即执行重排。
- 所有样式修改（写）放在前面统一执行，所有尺寸读取（读）放在后面集中进行
- 若需在动画帧中读写混合，用
requestAnimationFrame包裹读操作，确保它发生在浏览器布局计算之后 - 避免在for循环里交替执行
el.style.left = x + 'px'和console.log(el.offsetLeft)
减少样式依赖型DOM查询次数
像getComputedStyle(el)、el.currentStyle这类调用开销大，且每次调用都可能触发样式刷新；而el.className或el.dataset这类纯属性访问则轻量得多。
立即学习“Java免费学习笔记（深入）”；
- 需要多次获取同一元素的计算样式时，先缓存结果：
const style = getComputedStyle(el)，再复用style.width、style.marginTop - 优先用
dataset或className维护状态，而非依赖实时样式值判断逻辑分支 - 避免在滚动监听等高频回调中反复调用
getComputedStyle，可节流或用IntersectionObserver替代部分场景
离线构建结构，再统一挂载
当新增多个带样式的节点（如列表项、卡片组），逐个插入不仅触发多次重排，还可能因样式继承链导致重复计算。DocumentFragment提供了一个无渲染上下文的“草稿区”，所有节点操作都在内存中完成。
- 创建
const frag = document.createDocumentFragment() - 在
frag中完成全部createElement、setAttribute、classList.add等操作 - 最后仅一次
parent.appendChild(frag)，浏览器只做一次布局计算
