动态加载CSS本身不触发重排重绘，但新样式规则若修改width、height、margin、padding、display、font-size等几何属性，会立即引发重排；仅改color、background-color、opacity等视觉属性则只触发重绘。
动态加载 CSS 本身不直接“导致”重排重绘，而是它所引入的新样式规则，在应用时修改了已渲染元素的几何属性或视觉属性，从而触发浏览器执行重排或重绘。
为什么 document.head.appendChild(<link rel="stylesheet">) 会立刻引发重排
浏览器在 <link> 插入 DOM 后，会立即开始解析并应用其中的 CSS 规则——此时页面很可能已完成首屏渲染，已有元素处于稳定布局状态。一旦新规则命中已存在元素，并修改以下任一属性，就会强制重排：
-
width/height：比如第三方组件库把按钮高度从36px改成40px -
margin/padding：导航栏突然多出8px上边距，顶开下方内容 -
display（如从none→block）：骨架屏替换后，真实卡片“弹出”，破坏原有流式占位 -
font-size/line-height：主题 CSS 切换字体大小，导致段落行高突变、文字换行点偏移 -
position+top/left：原本static的弹窗被新样式设为absolute并偏移，父容器因脱离文档流而收缩
哪些动态 CSS 场景只触发重绘，相对安全
如果新加载的 CSS 仅修改不影响布局的视觉属性，浏览器通常只重绘，性能影响小得多：
-
color、background-color：深色模式切换主色调 -
border-color（边框宽度未变）：按钮描边颜色变化 -
opacity、visibility：控制元素显隐但保留占位 -
box-shadow、text-shadow：添加投影效果
注意：visibility: hidden 是重绘，display: none 是重排——二者语义和开销完全不同，不能混用。
立即学习“前端免费学习笔记（深入）”；
常见错误操作与替代方案
很多“优化”写法反而加剧问题，关键在于控制样式生效时机和范围：
- ❌ 在
DOMContentLoaded后直接appendChild：此时用户可能已在滚动或点击，位移即计入 CLS - ❌ 动态注入含
@font-face的 CSS：字体加载策略变更（如font-display: swap）引发 FOUT，fallback 字体与 Web Font 行高不一致，造成文本块跳变 - ✅ 预加载用
media="print"：先插入<link media="print" href="theme.css">，等资源就绪再改media=""，避免阻塞渲染 - ✅ 延迟到空闲期：用
requestIdleCallback包裹注入逻辑，避开用户交互高峰 - ✅ 关键样式内联：首屏必须的布局类（如容器栅格、标题尺寸）应内联在
，不留给 JS 动态加载
真正难处理的不是“加 CSS”，而是加完之后，浏览器要拿新规则去比对所有已渲染节点——哪怕只有一条规则匹配到一个元素，只要它动了 height 或 margin，整个链路就从重绘升级为重排。所以审查动态 CSS 内容，比审查加载方式更重要。
