浏览器在body底部加载CSS会触发重绘（甚至重排），因为DOM已部分渲染，此时才构建CSSOM，导致样式匹配后需更新大量元素的计算样式；若涉及几何属性变化，还会引发全局重排与布局塌陷。

为什么浏览器会在body底部加载CSS时重绘

因为浏览器必须重建渲染树并重新绘制已渲染的内容。当CSS在<body>底部（比如</body>前）引入，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的重绘问题。原因很直接：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• media="print"只让该CSS不参与屏幕渲染路径，它根本不会影响<body>中已渲染的DOM，也就谈不上“重绘”——它压根不会被应用
• 想延迟加载非关键CSS，正确做法是用media="not all" + JS激活，例如：<link rel="stylesheet" href="non-critical.css" media="not all" onload="this.media='all'">，且这个<link>仍须放在<head>里
• 把<link>塞进<body>底部，无论加什么media值，只要它最终被设为all或匹配当前设备，就会走完整阻塞流程，触发重绘

内联style或<style>标签放body底部呢

同样危险，但机制略有不同：

立即学习“前端免费学习笔记（深入）”；

• <style>在<body>中解析时，浏览器会暂停HTML解析，同步构建CSSOM，然后对已构建的DOM子树重新匹配样式——这相当于局部重绘，范围取决于该<style>作用域
• 内联样式（style="..."）本身不触发重绘，但若它出现在DOM节点之后（比如<div>content</div><script>el.style.color='red'</script>），JS操作会强制同步计算样式，可能引发强制同步布局（layout thrashing）
• 所有这些操作都发生在用户已看到部分内容之后，违背了“渐进式渲染”原则，LCP指标必然恶化

关键点在于：重绘不是由“放在哪”决定的，而是由“什么时候影响渲染树”决定的。放在<body>底部，等于主动把样式注入时机拖到用户可见之后——这时候再改样式，浏览器别无选择，只能重画。