favicon和manifest必须是head内第一个非空白节点，即紧随<meta charset>和<title>之后、所有CSS link之前；否则旧版Chrome/Safari可能跳过图标请求或导致manifest解析失败。
favicon 和 manifest 必须是 head 里第一个非空白节点
浏览器对 <link rel="icon"> 和 <link rel="manifest"> 的加载时机非常敏感——它们必须出现在 <meta charset> 和 <title> 之后、任何 <link rel="stylesheet"> 之前，且不能被注释或空格干扰。
常见错误：把 <link rel="icon" href="/favicon.ico"> 放在 <meta> 块中间，或紧贴 <title> 后但前面有换行/空格；旧版 Chrome/Safari 会跳过请求，地址栏图标短暂显示默认 favicon。
- 正确顺序示例：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width"><title>Page</title><link rel="icon" href="/favicon.ico"><link rel="manifest" href="/manifest.webmanifest"> - 别写
rel="shortcut icon"—— 现代浏览器不认，且和标准rel="icon"冲突 - 别显式声明
type="image/x-icon"—— CDN 可能改写 Content-Type，触发 MIME 校验失败
stylesheet link 必须按层叠优先级从上到下排列
<link rel="stylesheet"> 的顺序直接决定 CSS 覆盖行为：后加载的同权重规则无条件覆盖前者。这不是“建议”，是渲染引擎的确定性逻辑。
典型翻车场景：theme.css 明明改了 h1 { margin: 2rem; }，但页面还是 0 —— 检查 DevTools 的 Styles 面板，发现该规则被后面某个 reset.css 或组件库 CSS 覆盖了。
立即学习“前端免费学习笔记（深入）”；
- 推荐物理顺序：
reset.css→base.css→components.css→page.css→theme.css - 路径必须基于 HTML 文件位置计算：若 HTML 在
/blog/post.html，引用/css/main.css应写href="/css/main.css"（根相对），而非./css/main.css - 绝对不要在 CSS 文件里用
@import拆分样式 —— 它强制串行加载，且实际注入顺序与 HTML 中<link>顺序不一致
preload 和 defer script 要紧挨它服务的目标资源
<link rel="preload"> 不改变加载顺序，只加速下载；它必须放在对应 <link rel="stylesheet"> 或 <script defer> 之前，否则预加载失效。
比如你要预加载 font.woff2，<link rel="preload" as="font" href="/font.woff2"> 必须出现在 @font-face 规则所在的 <style> 或引入该字体的 <link rel="stylesheet"> 之前。
-
<link rel="preload" as="style" href="critical.css">+<link rel="stylesheet" href="critical.css">必须成对出现，且 preload 在前 - 同步脚本（无
defer或async）禁止放在<head>里 —— 它会阻塞 HTML 解析和首屏渲染 -
<script defer>可以放<head>末尾，但必须在所有<link rel="stylesheet">之后，避免阻塞 CSSOM 构建
viewport meta 必须紧贴 title 之后、首个 stylesheet 之前
<meta name="viewport"> 没有硬性解析顺序要求，但延迟声明会导致移动端页面初始缩放异常——比如先渲染出宽屏布局，再突然缩放，用户看到“抖动”。
最稳妥位置是：<meta charset> → <meta name="viewport"> → <title> → <link rel="icon"> → <link rel="stylesheet">。
- 如果用了 CSP 或 strict MIME 类型检查，
<link rel="manifest">放太靠后可能因响应头缺失而解析失败 - 所有
<link>都必须在<head>内 —— 放到<body>会触发 FOUC，IE6–8 直接忽略 - 路径写错时 Network 面板只会显示
Failed to load resource: the server responded with a status of 404 ()，没其他提示，容易漏查
