link标签必须放在<head>内，否则会导致FOUC（无样式内容闪现）、白屏或整页无样式；IE6–8会直接忽略<body>中的link，且漏写或拼错rel="stylesheet"将静默失效。
link标签必须放在里，否则样式可能白屏或闪现
浏览器解析 HTML 是流式的，遇到 <link rel="stylesheet"> 就会暂停渲染，等 CSS 下载并解析完才继续。如果它被写在 <body> 里，DOM 已经开始渲染，但样式还没加载——结果就是 FOUC（无样式内容闪现）。IE6–8 更极端：直接跳过 <body> 里的 <link>，整页没样式。
常见错误包括：
- 用 JS 动态创建
<link>后 append 到<body>（等于放弃浏览器原生资源调度） - 把
<link rel="stylesheet">放在<title>后、<meta charset>前（部分旧版 Safari 会忽略） - 漏写
rel="stylesheet"或拼成rel="styleSheet"（浏览器静默忽略，控制台不报错）
preload 必须紧贴 后，放错位置就赶不上首屏
<link rel="preload"> 一被解析就发起请求，不等 DOM 构建完成。如果它被塞在 <title> 后、<script> 后，甚至 <body> 里，字体或首屏图的下载可能比理想时间晚 200–400ms——弱网下直接导致 FOIT 或 LCP 延迟。
关键约束：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确位置：
<meta charset>后、<title>前 - ❌ 错误位置：
<script>标签后、<style>块内、任何<body>子节点中 -
as属性必须严格匹配：CSS →as="style"，字体 →as="font"+crossorigin，JS →as="script" - 漏写
as或写成as="javascript"，请求会降级为 Priority: Low，和普通 fetch 无异
preconnect 要抢在第一个资源请求前建连，晚一行就白写
<link rel="preconnect"> 的目标是提前完成 DNS + TCP + TLS 握手，但它只对跨域 HTTPS 域名有效，且必须早于任何可能触发该域名请求的标签（比如 <img src="https://cdn.example.com/logo.png">）。晚于关键 CSS 或 JS 的 preconnect 几乎无效。
容易踩的坑：
- 漏写
crossorigin属性（空值即可：crossorigin），浏览器会把它和带凭据的 fetch 视为两个隔离连接池 - 写成
crossorigin=""或crossorigin="anonymous"（HTML 解析器可能报错或降级） - 为超过 4–6 个域名添加
preconnect（挤占浏览器并发连接数，反而阻塞主站） - 对同源域名（如
https://your-site.com）加preconnect（无收益，浏览器自动复用）
rel="icon" 放错位置或 sizes 不全，高分屏图标就糊
<link rel="icon"> 同样受位置限制——放错位置会让高分屏设备 fallback 到默认 16×16 图标，显示模糊。它必须放在 <head> 内，且要配合明确尺寸声明才能被现代设备正确识别。
多尺寸需多个标签，不能靠一个 sizes 属性覆盖：
<link rel="icon" href="icon-16.png" sizes="16x16" type="image/png"><link rel="icon" href="icon-32.png" sizes="32x32" type="image/png"><link rel="icon" href="icon-192.png" sizes="192x192" type="image/png">
sizes="any" 对标准 rel="icon" 无效，只适用于 rel="mask-icon"（Safari pinned tab）。
