link标签本身不支持平滑过渡，它仅负责加载CSS资源；避免FOUC需将link置于head中，而样式过渡效果须由CSS transition或JS控制DOM状态实现。
link 标签本身不支持“平滑过渡”
<link> 是资源加载指令，不是动画控制机制。它只负责把 CSS 文件拉进页面，不参与样式变化过程。所谓“无阻塞样式过渡”，其实是两个独立问题混在一起了：一是避免 FOUC（样式闪现），二是让样式变更视觉上平滑。前者靠 <link> 放对位置解决，后者靠 CSS transition 或 JS 控制 DOM 状态实现。
为什么把 link 放在 head 里能避免 FOUC
浏览器解析 HTML 是自上而下流式进行的。如果 <link rel="stylesheet" href="main.css"> 放在 <body> 里，表格、标题等元素会先以无样式状态渲染出来，等 CSS 加载完再重绘——这就是 FOUC。
- 必须放在
<head>内，且最好在<meta charset>和<title>之后 - 多个
<link>按顺序加载，后加载的 CSS 规则会覆盖前面同选择器的声明 - 路径必须相对于 HTML 文件所在目录，不是编辑器打开路径或 CSS 文件自身位置
- Network 面板看不到请求？90% 是
href路径写错，比如漏了./或多写了../
真正决定“过渡是否平滑”的是 CSS 属性和时机
你给 a:hover { color: #ff6b6b; } 加了 transition 却没效果，大概率是因为：
-
transition写在了:hover里，而不是基础状态（如a或a:link）上 - 用了
transition: all 0.3s;，结果text-decoration不支持过渡，下划线还是突兀出现 - 目标元素初始不可见（
display: none或刚createElement未append），浏览器无法读取起始值 - JS 中连续改类名没留重排机会，比如
el.classList.add('fade-in'); el.classList.remove('hidden');中间没强制读取布局（如el.offsetHeight）
路由切换时的“无阻塞过渡”要绕开 link 的限制
SPA 中用 history.pushState 切换内容，<link> 加载的 CSS 已存在，但 DOM 没重建，浏览器感知不到变化。此时过渡失效不是 <link> 的锅，而是状态没“重置”：
立即学习“前端免费学习笔记（深入）”；
- 新内容插入后，先设
opacity: 0; transform: translateY(20px); - 立刻读一个布局属性（如
el.scrollHeight）触发重排 - 再加动画类（如
animate-in），让浏览器捕获起始/结束帧 - 若用 View Transitions API，
view-transition-name必须严格一致、大小写敏感，且旧元素不能提前opacity: 0
最容易被忽略的是：transition 是否生效，和 <link> 加载快慢无关，只取决于你有没有给浏览器提供“可动画的属性变化”和“两次重排之间的间隙”。
