如何单次操作修改元素dataset属性以避免多次CSS Reflow

核心原理说明 #

dataset是DOM data-*属性的实时映射，每一次对dataset的增删改操作都会直接修改DOM属性，触发浏览器重排校验，连续操作就会触发多次重排。同时element.dataset是只读访问器，无法直接给它赋值新对象实现批量覆盖。 #

实现单次重排的可行方案 #

方案1：临时脱离文档流修改（无需替换元素，无感知） #

这是兼容性最好、不需要改动元素本身的方案，全程仅触发1次重排：

// 记录元素原位置
const parent = element.parentNode
const referenceNode = element.nextSibling

// 移除元素，此时元素不在渲染树中，操作不会触发重排
parent.removeChild(element)

// 批量执行所有dataset操作（注意原示例delete element.b为笔误，需要操作dataset对象）
element.dataset.a = '1'
delete element.dataset.b
element.dataset.c = '2'

// 插回原位置，仅触发1次重排
parent.insertBefore(element, referenceNode)

方案2：临时修改display属性（代码更简洁） #

同步操作下浏览器会合并渲染队列，最终仅触发1次重排，用户不会感知到元素闪烁：

// 保存原有display值
const originDisplay = element.style.display
// 让元素脱离渲染树
element.style.display = 'none'

// 批量执行所有dataset操作
element.dataset.a = '1'
delete element.dataset.b
element.dataset.c = '2'

// 恢复原有展示状态
element.style.display = originDisplay

方案3：克隆替换元素（即你提到的完全替换路径） #

如果你的场景允许替换原元素，也可以用这种方案，仅触发1次重排：

const newEl = element.cloneNode(true)
// 在未插入文档的克隆元素上修改属性，不会触发重排
newEl.dataset.a = '1'
delete newEl.dataset.b
newEl.dataset.c = '2'
// 替换原元素，仅触发1次重排
element.replaceWith(newEl)

常见问题解答 #

完全替换当前元素是实现该需求的唯一途径吗？ #

不是。上面的方案1、方案2都不需要替换原元素，即可实现仅触发1次重排的需求。

内容的提问来源于stack exchange，提问作者iTaMaR