浏览器在body底部加载css会触发重绘（甚至重排），因为dom已部分渲染，此时才构建cssom，导致样式匹配后需更新大量元素的计算样式；若涉及几何属性变化，还会引发全局重排与布局塌陷。
为什么浏览器会在body底部加载CSS时重绘
因为浏览器必须重建渲染树并重新绘制已渲染的内容。当CSS在底部（比如前）引入，DOM已经构建完毕、部分内容甚至已完成首次绘制，此时才开始下载和解析CSS，触发CSSOM构建。一旦CSSOM就绪，浏览器会将新样式与已有DOM节点匹配，发现大量元素的计算样式发生变化（如颜色、尺寸、定位），于是标记对应区域为“需重绘”；若涉及几何属性（width、height、display、position等），还会触发重排（reflow）。
实际会发生什么：从白屏到闪动再到布局塌陷
这不是理论风险，而是可复现的渲染异常：
- 页面先显示无样式的原始HTML（纯文本+默认间距），几毫秒后突然“跳”成带样式的布局——这是重绘+重排叠加导致的视觉抖动
- 如果CSS里定义了
body { margin: 0; font-size: 16px; }，而初始渲染用的是浏览器默认margin: 8px和16px字体，那么整个文档流尺寸变化，触发全局重排 - 更糟的是，某些元素（如浮动容器、绝对定位子元素）依赖父级高度/宽度，而父级样式尚未就绪，导致子元素错位或消失，即所谓“布局塌陷”
- 即使CSS文件已缓存，解析CSSOM仍需时间；若含大量嵌套选择器或
calc()表达式，延迟更明显
media="print"之类属性能绕过这个问题吗
不能用于解决底部CSS的重绘问题。原因很直接：
-
media="print"只让该CSS不参与屏幕渲染路径，它根本不会影响中已渲染的DOM，也就谈不上“重绘”——它压根不会被应用 - 想延迟加载非关键CSS，正确做法是用
media="not all"+ JS激活，例如：<link rel="stylesheet" href="non-critical.css" media="not all" onload="this.media='all'">，且这个<link>仍须放在里 - 把
<link>塞进底部，无论加什么media值，只要它最终被设为all或匹配当前设备，就会走完整阻塞流程，触发重绘
内联style或
同样危险，但机制略有不同：
-
<style></style>在中解析时，浏览器会暂停HTML解析，同步构建CSSOM，然后对已构建的DOM子树重新匹配样式——这相当于局部重绘，范围取决于该<style></style>作用域 - 内联样式（
style="..."）本身不触发重绘，但若它出现在DOM节点之后（比如<div>content</div> <script>el.style.color='red'</script>），JS操作会强制同步计算样式，可能引发强制同步布局（layout thrashing） - 所有这些操作都发生在用户已看到部分内容之后，违背了“渐进式渲染”原则，LCP指标必然恶化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
