强制触发重排的全局属性包括：style中修改width/height/margin/padding/display/position；contenteditable="true"开启实时布局监控；hidden切换导致元素移出渲染树。
直接操作 HTML 全局属性（如 style、contenteditable、hidden）会按属性语义触发不同层级的渲染开销——有些只重绘，有些强制重排，有些甚至引发 layout thrashing；关键不在“动没动”，而在“动了什么”和“怎么动”。
哪些全局属性修改会强制触发重排？
不是所有属性变更都平等。浏览器对属性的响应逻辑由其是否影响几何计算决定：
-
style中改width、height、margin、padding、display、position等布局相关值 → 立即触发重排 -
contenteditable="true"→ 浏览器开启实时布局监控通道，后续任意输入/粘贴/光标移动都可能触发同步 layout + paint -
hidden切换 → 表现类似display: none，移出渲染树，强制重排（整个受影响子树） -
tabindex变更一般不重排，但若伴随焦点切换且 :focus 里有box-shadow或transform，则可能间接触发重绘甚至重排
用 style.setProperty() 改 CSS 变量为什么比改 class 更轻？
因为它是「局部样式更新」，不走 CSSOM 重匹配流程：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
el.style.setProperty('--color', 'red')只更新该元素及其引用该变量的子树的计算样式，跳过选择器匹配和整页 CSSOM 遍历 -
el.classList.add('theme-dark')虽然也快，但需浏览器重新检查所有规则中是否含.theme-dark，再批量应用对应声明块；若类名选择器很深（如.page .section .card p span），样式计算成本会上升 - 误用
document.documentElement.style.setProperty()改全局变量 → 所有后代中用了var(--color)的元素都会被标记为 dirty，哪怕它们在视口外或 display: none - 连续调用
setProperty()多次，浏览器通常合并为一次样式更新；而el.style.cssText = '...'每次都清空已有内联样式，易导致 transform 被覆盖、视觉跳变
contenteditable 高度自适应为何一加就卡？
根本不是“属性本身慢”，而是它把浏览器拖进了高频同步 layout 泥潭：
- 每次按键、粘贴、光标移动，浏览器都必须立刻重算整个 contenteditable 区域的
scrollHeight、行高、折行位置、嵌套标签边界 —— 这是完整 layout 阶段 - 常见错误：在
input回调里直接读el.scrollHeight再设el.style.height→ 每次都强制 flush 队列，100 字 = 100 次重排 - 正确做法：先
el.style.height = 'auto'重置，再el.style.height = el.scrollHeight + 'px'，且包裹requestAnimationFrame聚合多次变更 - 空内容时
scrollHeight在 Safari 返回 0 → 必须用el.textContent.trim().length === 0判断并设最小高度（如1.2em） - 禁用
overflow-y: scroll，改用hidden，否则滚动条宽度变化会再次触发 layout
为什么读取 offsetTop/getBoundingClientRect 就卡？
这些 API 不是“获取数据”，而是“命令浏览器立刻交出当前布局结果”：
- 调用
el.offsetTop或getComputedStyle(el).getPropertyValue('width')时，浏览器必须中断 JS 执行，flush 排队样式，执行 layout，再返回值 - 循环中混用：先
el.style.left = i + 'px'，再读el.offsetTop→ 每轮都强制重排，N 次循环 = N 次 layout - 实时集合陷阱：
document.getElementsByTagName('div')每次访问都可能触发重排；应转成数组：[...document.getElementsByTagName('div')] - 优化路径：把读取提到循环外，例如
const rootStyle = getComputedStyle(document.documentElement)，再复用rootStyle.getPropertyValue('--step')
真正难防的不是单次重排，而是那些藏在 input、scroll、resize 回调里的微小 layout 请求——它们不报错、不抛异常，只悄悄把帧率从 60fps 拉到 30fps 以下。别信“只是改个属性而已”，浏览器的渲染流水线不会因为你写了注释就绕道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
