link标签必须写在head中，否则rel="stylesheet"会导致FOUC和渲染阻塞错乱，rel="preload"/"preconnect"失效，rel="icon"在Safari等浏览器不识别，仅非关键样式在JS控制下可放body但牺牲优化与一致性。

link 标签写在 和 里的实际行为差异

浏览器只在解析

阶段扫描并处理 link 标签用于资源发现（如预加载、DNS 预连接、图标声明），一旦进入 解析，多数关键 rel 值会被忽略或降级处理——这不是规范“不允许”，而是浏览器调度机制决定的硬限制。

rel="stylesheet" 放在 底部会怎样

虽然部分浏览器（如 Chrome）会容忍，但后果不可控：

• 触发 FOUC（Flash of Unstyled Content）：样式表加载前，HTML 已渲染为无样式状态，用户可见白屏或错位
• 阻塞渲染时机错乱：浏览器本应在 阶段就阻塞渲染等待关键 CSS，放到底部等于放弃控制权
• 构建工具（如 Vite、Webpack）无法在 HTML 预编译阶段提取该样式依赖，影响 SSR 或静态导出
• W3C 验证失败，CI/CD 流水线可能因 HTML5 校验不通过而中断

rel="preload" 或 rel="preconnect" 写在 就等于没写

这些是早期资源提示（early hints），必须在

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

中声明才能被浏览器纳入初始资源调度队列：

• rel="preload" 放在 ：浏览器不会提升优先级，也不会设置正确的 as 类型和 CORS 行为，等同于普通 href 请求
• rel="preconnect" 放在 ：DNS 查询和 TCP/TLS 握手延迟到 DOM 构建后期，失去提前建立连接的意义
• rel="icon" 放在 ：Safari 某些版本（如 iOS 16.4）完全不识别，桌面端也可能 fallback 到默认文档图标

唯一能勉强“放 body”的情况及其代价

仅当 rel="stylesheet" 是非关键、可异步、不影响首屏的辅助样式（如打印样式、暗色模式切换后加载的主题 CSS），且你主动用 JS 控制加载时机时，才可能绕过

限制。但这需要：

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

• 显式添加 media="print" 或 media="(prefers-color-scheme: dark)" 避免阻塞
• 配合 onload 回调做样式激活（link 本身不支持 onload，得监听 link.sheet.cssRules 或用 document.styleSheets 轮询）
• 放弃预加载优化、服务端渲染一致性、SEO 友好性

真实项目里，把 link 放出

，基本等于主动放弃对资源加载节奏的控制权——它不像 script 有 defer 可兜底，link 的位置就是它的调度权限。