强制重排的全局属性是class（含布局声明时）、style（改布局属性时）和hidden（设为true/false时）；id和title不触发重排。class切换卡顿主因是layout thrashing，即读取offsetheight等布局属性导致同步重排。

class、id、style、hidden 这些全局属性值一改，浏览器不是“重绘一下就完事”，而是会按 DOM 变更 → 样式计算 → 布局（reflow）→ 绘制（paint）的链条重新走一遍。其中真正触发排版重算（layout）的，只有少数几个属性变更。

哪些全局属性改了会强制重排？

不是所有属性变化都影响几何信息。只有那些直接改变元素在文档流中占位、尺寸、位置或可见性的属性，才会让浏览器重新计算布局树：

• class：只要新 class 对应的 CSS 规则里含 width、height、margin、padding、display、position、float 等布局相关声明，就会重排；纯 color 或 opacity 不会
• style：内联样式修改时，若赋值的是 element.style.width = '200px' 这类布局属性，立即触发同步重排；而 element.style.opacity = '0.5' 仅重绘
• hidden：设为 true 等价于 display: none，元素彻底退出文档流，父容器高度重算，子树全部跳过布局阶段；设回 false 则整棵子树重新参与布局
• id 和 title：纯语义/辅助属性，不触发重排或重绘，只影响可访问性树和工具提示

为什么 class 切换有时卡顿？

常见场景是用 class 控制展开/收起菜单，但动画一卡一卡的。根本原因不是 JS 慢，而是你写了类似这样的代码：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

menu.classList.add('open');
// 紧接着就读 offsetHeight
console.log(menu.offsetHeight); // 强制同步 layout！

浏览器发现你读取了布局相关属性（offsetHeight、getBoundingClientRect()、scrollWidth 等），必须立刻把之前排队的样式变更 flush 掉，执行完整 layout 流程——这叫 layout thrashing。

• 避免在 class 切换后立刻读取布局信息；如需测量，统一放在 requestAnimationFrame 回调里
• 用 transform 或 opacity 动画替代 height、margin 动画，前者走合成层，不触发布局
• 展开动画若必须用 height，先设 height: 0 → offsetHeight 强制 layout → 再设 height: auto，不如直接用 max-height 过渡（虽不精确但无 layout）

hidden 和 display: none 的行为差异

表面上都是“看不见”，但底层处理路径不同：

• hidden 是 HTML 全局布尔属性，设为 true 后，渲染引擎在构建渲染树（render tree）阶段就跳过该节点，不生成对应 render object；DOM 节点仍在，但 layout 阶段完全无视它
• display: none 是 CSS 声明，样式计算阶段已标记该元素不可见，同样跳过 render tree 构建；但若通过 JS 动态改 style.display，仍会触发样式重计算 + layout
• 关键区别：hidden 切换开销略低（跳过样式计算中部分逻辑），且对无障碍支持更直接（屏幕阅读器默认忽略 hidden 元素）；但无法用 CSS 选择器 [hidden] 精确控制过渡动画，因为 display 已为 none

真正容易被忽略的是：哪怕只是改一个 class，如果它关联的样式表里有 @media (prefers-reduced-motion) 或 @supports (display: grid) 这类条件规则，浏览器也得重新跑一遍整个样式计算流程——不是所有重排都来自你写的那行 JS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！