强制重排的全局属性是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 慢，而是你写了类似这样的代码：
menu.classList.add('open');
// 紧接着就读 offsetHeight
console.log(menu.offsetHeight); // 强制同步 layout！
浏览器发现你读取了布局相关属性（offsetHeight、getBoundingClientRect()、scrollWidth 等），必须立刻把之前排队的样式变更 flush 掉，执行完整 layout 流程——这叫 layout thrashing。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 避免在 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。
