<meta charset="UTF-8">必须是<head>中第一个元素，否则浏览器用默认编码解析后续含中文的meta或title导致乱码且不可逆；X-UA-Compatible需紧随其后、在<title>前，否则IE退入怪异模式。
<meta charset> 必须是 <head> 中第一个元素，否则后续含中文或特殊字符的 <meta>（如 name="description"）可能被错误解析——这是唯一有强制顺序要求的点，其余顺序主要影响加载行为与兼容性，而非语法错误。
为什么 <meta charset="UTF-8"> 必须排第一
浏览器在解析 HTML 时，一旦遇到非 ASCII 字符（比如中文标题、关键词），会回退到默认编码（如 ISO-8859-1）解码；若此时 <meta charset> 还没读到，就已用错编码把后续 <title> 或其他 <meta> 内容“烧毁”了，刷新也救不回来。
- 它不依赖其他标签，也不被其他标签依赖，纯属“开局定生死”
- 即使写了
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，也无效——只有charset属性形式才被早期解析器识别 - 所有现代浏览器（包括 IE10+）都严格遵循此规则，不是建议，是解析逻辑刚需
<meta http-equiv="X-UA-Compatible"> 和 <title> 的位置关系
这个 IE 专属 meta 只对旧版 IE（≤11）生效，必须放在 <title> 之前，否则 IE 可能跳过它、直接进入怪异模式。
- 典型写法：
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>页面标题</title> - 它不影响现代浏览器，但若项目仍需支持 IE，漏掉或放错位置会导致整个页面渲染错乱
- 如果已明确放弃 IE 支持，可直接删掉这行，不必占位
CSS <link rel="stylesheet"> 和 JS <script> 的加载阻塞逻辑
浏览器解析到 <link rel="stylesheet"> 会暂停 HTML 解析，等 CSS 下载并构建完 CSSOM 才继续；而 <script> 默认也会阻塞，除非加 defer 或 async。
立即学习“前端免费学习笔记（深入）”；
- 推荐顺序：
<meta>→<title>→<link rel="stylesheet">→ 其他<link>（如icon、preload）→<script defer> -
<link rel="preload">应紧挨它要预加载的资源前（比如预加载某个字体，就放在对应@font-face的<style>或<link rel="stylesheet">前） - 避免在
<head>里放无defer/async的<script>，否则会卡住首屏渲染
容易被忽略的细节：viewport、preload 和 icon 的位置权衡
<meta name="viewport"> 虽无硬性顺序要求，但应尽量靠近顶部（<title> 后），确保移动端缩放逻辑尽早生效；<link rel="icon"> 放太靠后，可能导致地址栏/标签页图标短暂显示默认 favicon。
-
<meta name="viewport">放在<meta charset>和<title>之后、首个<link>之前最稳妥 -
<link rel="icon">不必第一，但别拖到最后——浏览器会并发请求，晚写几行就晚几毫秒开始下载 -
<link rel="preload">若用于关键 CSS 或字体，必须出现在对应资源声明之前，否则 preload 失效
真正难的不是记住顺序，而是理解每个标签在解析流水线中的介入时机：有的改编码（charset），有的切渲染模式（X-UA-Compatible），有的抢带宽（preload），有的锁主线程（同步 script）。顺序只是表象，背后全是浏览器如何分阶段消化 HTML 的事实。
