动态插入会触发全量重排，因其阻塞html解析、强制同步处理新样式，并可能因新css规则覆盖导致整页布局重计算；document.write注入更危险，会清空文档重建。
动态插入 <link> 标签会触发全量重排
浏览器解析到 <link rel="stylesheet"> 时，会立即阻塞 HTML 解析、发起 CSS 请求，并等待样式表下载并解析完成后再继续构建渲染树。这个过程本身就会中断当前渲染流程；更关键的是，一旦新 CSS 加载完毕，所有已计算样式的元素都可能因新规则覆盖而需重新计算布局（比如新增了 width、float、display 等影响几何的声明），从而触发整页或大范围重排。
常见错误写法：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/theme.css';
document.head.appendChild(link); // 插入瞬间就可能卡住主线程
- 即使 CSS 文件很小，插入动作本身也会让浏览器“暂停”当前渲染队列，强制同步处理新样式
- 若新 CSS 中包含媒体查询（如
@media (max-width: 768px)），且当前窗口尺寸匹配，还会额外触发一次响应式重排 - 在页面已滚动一段距离后插入，还可能因
position: sticky或height变化导致视口内多个区域重排
document.write 注入 CSS 是最危险的方式
在 DOM 构建完成后调用 document.write（哪怕只写一行 <style></style>），浏览器会清空整个文档并重建，等效于刷新页面——这不只是重排，而是从头开始解析 HTML、CSS、JS 全流程。即便在 DOMContentLoaded 后执行，也极易引发白屏或内容闪动。
典型误用场景：
// ❌ 千万别这么干
document.write('<style>.btn { width: 200px; }</style>');
-
document.write在现代前端工程中几乎无正当用途，Webpack/Vite 构建产物里出现基本可判定为遗留 bug - 它绕过所有样式作用域机制（如 CSS-in-JS 的哈希类名），可能意外覆盖全局样式
- DevTools 的 Rendering 面板中会看到连续多次
Layout记录，时间戳密集堆叠
用 insertRule 批量注入样式相对安全但仍有风险
通过 CSSStyleSheet.insertRule 动态添加规则，不会像 <link> 那样阻塞解析，也不会清空文档，但它仍会立即参与样式计算。如果新增规则命中了大量已有元素（比如 div { margin: 10px; }），且这些元素的 margin 原本由继承或默认值决定，那么每个匹配元素都可能触发局部重排。
安全操作建议：
- 优先使用
className切换预定义的 CSS 类，而非运行时拼样式 - 若必须用
insertRule，确保选择器足够具体（如.modal__header-title），避免通配符或低权重全局规则 - 批量插入时用
addRule（IE）或循环insertRule后，主动调用getComputedStyle(el).opacity触发一次同步重排，把抖动“收束”到一处，而不是分散在后续交互中
真正隐蔽的坑：CSS 加载完成后的隐式重绘链
很多人以为 CSS 加载完就结束了，其实不然。新样式生效后，若页面中存在以下任一情况，会立刻引发连锁反应：
- 有元素设置了
transition: all 0.3s，而新 CSS 修改了其color或background—— 这看似只重绘，但若该元素父容器用了will-change: transform，浏览器可能为其新建合成层，间接导致相邻元素重绘范围扩大 - 页面含
float布局，新 CSS 改变了某个浮动元素的width，会导致后续所有被推下的行内内容重排+重绘（尤其在图文混排场景下，影响远超预期） -
@font-face定义的新字体加载完成，触发文本重排（FOUT/FOUT 问题本质就是重排）；若同时修改了line-height或letter-spacing，重排幅度更大
这类链式反应很难被 DevTools 的 Performance 面板直接归因到“CSS 加载”，容易误判为 JS 执行慢或动画卡顿。最稳妥的做法是：动态引入 CSS 前，先对目标区域做 getBoundingClientRect() 快照，加载后再比对，确认是否发生意外位移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
