是的，link 标签位置不当会引发 FOUC；必须放在 head 内且靠前，避免置于 body 中或靠后，否则浏览器先渲染无样式内容再重绘，造成肉眼可见闪烁。
link 标签位置不当会引发 FOUC（Flash of Unstyled Content）
是的，<link rel="stylesheet"> 放在 内或靠后位置，浏览器可能先渲染无样式的 HTML，等 CSS 加载完成再重绘，造成肉眼可见的“闪一下”。这不是动画或 JS 导致的闪烁，而是样式加载时机问题。
常见错误写法：
<body> <h1>标题</h1> <link rel="stylesheet" href="style.css"> </body>
- 必须放在
内，且尽量靠前（在<title></title>之后、<script></script>之前） - 避免使用
@import在 CSS 文件中引入其他 CSS —— 它会阻塞并延迟后续规则解析 - 如果用了
rel="preload"提前加载 CSS，需配合as="style"和onload注入，否则无效甚至加重 FOUC
CSS 中使用 transition 或 animation 触发重排重绘时出现抖动
不是所有“闪烁”都是 FOUC；有些是动画过程中的视觉不稳定，比如在低性能设备上 transform 未启用硬件加速、或对 width/height/top/left 等属性做过渡。
- 优先用
transform: translateX()替代left，用opacity替代visibility动画 - 对动画元素加
will-change: transform（慎用，仅对明确要动画的元素） - 避免在
:hover中动态插入大量样式规则（如通过 JS 插入<style></style>），可能触发样式表重解析
动态插入 style 标签或切换 class 时未控制渲染节奏
JS 控制主题切换、暗色模式、A/B 测试样式时，若直接操作 document.head.appendChild 或频繁 element.className = ...，可能在样式生效前短暂回退到默认状态。
立即学习“前端免费学习笔记（深入）”；
- 切换主题时，先
document.documentElement.classList.add("loading-theme")，等新 CSS 加载完成再替换类名 - 用
CSSStyleSheet.replace()（现代浏览器）替代移除+插入整个<style></style>标签，减少 DOM 波动 - 避免在
requestAnimationFrame外直接批量修改多个样式属性，容易触发多次 layout
媒体查询或 prefers-color-scheme 切换时样式未预加载
当用户系统主题变化，而页面只在监听到 prefers-color-scheme 变化后再加载对应 CSS，中间存在空白期，表现为“白屏一闪”或文字颜色突变。
- 把亮色/暗色共用样式写在主 CSS 中，仅用
@media (prefers-color-scheme: dark)覆盖差异部分 - 不要用 JS 动态
fetch暗色 CSS 并注入 —— 首次切换必然有延迟 - 服务端可识别
Sec-CH-Prefers-Color-Scheme请求头（需开启 Client Hints），提前返回对应主题 HTML
link 放在 body 底部这种低级错误，仍出现在不少老项目或 CMS 生成页中。FOUC 在高速网络下不明显，但在 3G 或弱网模拟下几乎必现。 
