必须置于最开头，否则浏览器会用默认编码（如iso-8859-1）错误解析前1024字节，导致中文乱码、dom回滚、脚本执行错乱；其位置决定字节流能否正确转为unicode，影响后续所有标签识别。
meta charset 必须出现在 最前面，否则浏览器会用错误编码解析前段字节流，触发重解析——这不是“慢一点”，而是 DOM 构建回滚、preload 失效、脚本执行错乱的起点。
为什么浏览器在看到
浏览器拿到的是字节流，不是字符串。它从第一个字节开始扫描，不等整个 HTML 下载完，就启动词法分析（Tokenizer）。这个阶段只认字节模式，比如 0x3C 0x6D 0x65 0x74 0x61（即 <meta>）一出现，立刻尝试匹配 <code>charset 属性。
关键点在于：解析器在构建 DOM 树之前，就已经在解码和分词。所以 <meta charset="UTF-8"> 的位置，决定的是「前 1024 字节」能否被正确转成 Unicode 字符——这直接影响后续所有标签名、属性值、文本内容的识别。
- 如果它出现在
<title></title>后面，而<title></title>里有中文，浏览器可能已按 ISO-8859-1 解出乱码，再切编码也救不回已生成的 Token - Android WebView 对此更敏感：只认第一个
<meta charset>，且必须是内首个或第二个标签（紧随<title></title>后） - HTTP 响应头里的
charset优先级高于 HTML 内声明，但一旦响应头缺失，就完全依赖这个<meta>的位置
<doctype></doctype> 是解析器的第一个开关，不是装饰
必须是文档最开头（BOM 之后、任何空格/注释之前），否则会被降级为怪异模式（<code>document.compatMode === "BackCompat"）。这不是兼容性警告，而是盒模型、行高计算、表格字体继承等底层行为的彻底切换。
常见踩坑：
- 构建工具（如 Vite、Webpack）注入的 HTML 模板，可能在
前加了注释或空行 → 触发 Quirks Mode - 服务端渲染（SSR）框架动态拼接 HTML 时，模板开头多了一个换行或 BOM 字节 → Chrome 会静默降级，但 iOS Safari 可能直接白屏
-
..>这类带 DTD 的声明，在现代项目中毫无必要，反而增加解析开销；HTML5 的是唯一推荐写法
<meta name="viewport"> 放错位置会导致双倍布局
iOS Safari 在解析到 <meta name="viewport"> 前，会先按默认 980px 宽度渲染一次页面（即使 CSS 已加载），等看到 viewport 后再强制重排。这个过程不可见但耗时，尤其在首屏有固定定位或 flex 布局时，会造成明显跳动。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确顺序应该是：
<meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0">- 然后才是
<link rel="stylesheet">、<script></script>等资源标签
如果 <link rel="stylesheet"> 出现在 viewport 之前，某些旧版 Android 浏览器会忽略该 CSS 的媒体查询逻辑，导致响应式失效。
<link rel="preload"> 不是写上去就生效
预加载指令只有在对应资源标签（如 <link rel="stylesheet">）被解析前被发现，才会起作用。浏览器流式解析，遇到 <link rel="preload"> 就发起下载，但不会执行；等真正遇到 rel="stylesheet" 时，才把已下载的文件接入 CSSOM。
失效常见原因：
- preload 写在对应
<link>之后 → 浏览器已开始下载原资源，指令被丢弃 - href 路径不一致（比如 query 参数不同、大小写差异）→ 缓存不命中，等于没预加载
- 字体 preload 漏了
crossorigin属性 → Chrome 120+ 默认报 CORS 错误，控制台显示Failed to load resource: Origin is not allowed by Access-Control-Allow-Origin - 对含
@import的 CSS 文件做 preload → 浏览器仍需额外请求被 import 的文件，预加载只覆盖第一层
真正关键的不是“有没有 preload”，而是它是否在字节流中足够靠前、是否与最终加载路径严格一致、是否配对了正确的 as 和 onload 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
