link标签的加载顺序必须严格遵循：favicon和manifest的link必须位于head内第一个非空白节点，且在所有CSS link之前；CSS link应按基础样式、组件样式、主题样式的顺序排列，主题CSS建议用media条件加载。
link 标签的加载顺序直接影响图标显示和首屏渲染
浏览器按 <link> 在 HTML 中出现的顺序依次发起请求，且对 rel="stylesheet" 有阻塞渲染行为，而 rel="icon"（尤其 rel="shortcut icon"）在旧浏览器中可能被忽略或错误复用——如果它出现在样式表之后，部分 Chrome 和 Safari 会延迟加载甚至跳过图标请求。
关键判断：图标 <link> 必须放在所有 CSS <link> 之前，且优先于 <script>（尤其是内联或同步脚本），否则图标请求可能被推迟到 DOM 解析完成之后。
favicon 和 manifest 的 link 必须紧贴 <head> 开头
不是“越早越好”，而是“必须在第一个 CSS 之前”。常见错误是把 <link rel="icon"> 放在 <meta> 块中间，或跟在 <title> 后面但没注意空格/注释干扰。
-
<link rel="icon" href="/favicon.ico">应为<head>内第一个非空白、非注释节点（可紧随<meta charset>） -
<link rel="manifest" href="/manifest.webmanifest">同样需前置，避免因 CSP 或缓存策略导致解析失败 - 不要写
<link rel="shortcut icon" href="...">—— 现代浏览器已不依赖该 type，且 IE11+ 会与标准rel="icon"冲突 - 避免使用
type="image/x-icon"：多数 CDN 或代理会改写 Content-Type，显式声明反而触发 MIME 类型校验失败
CSS link 的顺序影响 FOUC 和主题切换稳定性
多个 <link rel="stylesheet"> 按顺序加载，但浏览器只阻塞渲染直到**最后一个阻塞样式表**下载并解析完成。若把深色主题 CSS 放在基础样式之后，用户可能先看到亮色再闪动变暗——这不是 JS 控制问题，而是加载时序本身导致的。
立即学习“前端免费学习笔记（深入）”；
- 基础全局样式（如 reset、variables）应最先加载
- 组件级 CSS 次之，避免用
@import在 CSS 内部引入，它会串行阻塞 - 主题类 CSS（如
dark-theme.css）应最后，且建议用media="(prefers-color-scheme: dark)"条件加载，而非 JS 注入 - 慎用
rel="preload"加载 CSS：它不改变执行顺序，仅提前发起请求；若 preload 的 CSS 里含@import，仍会阻塞主流程
验证顺序是否生效：看 Network 面板的 Initiator 和 Timing
打开 DevTools → Network → 刷新页面，按 “Initiator” 列排序。正常情况下：favicon.ico 的 Initiator 应为 “Parser”，而首个 CSS 的 Initiator 是 “Parser” 且 Start Time 明显晚于图标；若有 CSS 的 Start Time 早于图标，说明 HTML 中顺序写反了，或服务端注入了额外 <link>（比如某些 SSR 框架的 head 插件）。
容易被忽略的是 HTTP/2 推送或 Service Worker 缓存：它们可能掩盖真实顺序问题。测试前请禁用 Push（Nginx/Apache 配置中关闭 http2_push）并清空 SW 缓存（navigator.serviceWorker.getRegistrations().then(r => r.forEach(r => r.unregister()))）。
