必须位于html前1024字节且为内首个非空白节点，否则预解析器因编码未定而放弃扫描，回退至gbk/iso-8859-1导致解码错乱、资源加载延迟、lcp恶化。
浏览器预解析器（preload scanner）在主 HTML 解析器启动前就扫描文档，提前发现 <link rel="stylesheet">、<script></script>、<img> 等资源并发起加载。但一旦 HTML 编码不规范，它会直接放弃扫描，退化为串行加载——页面白屏时间拉长、关键 CSS/JS 延迟下载、LCP 指标恶化。
为什么 <meta charset> 必须在前 1024 字节且无干扰
预解析器只读取文档开头约 1024 字节来判断编码，若该范围内存在 BOM、注释、空格或 <script></script> 标签，它可能跳过 <meta charset="UTF-8">，回退到系统默认编码（如 Windows 上是 GBK），导致后续所有字节解码错乱，进而让预解析器终止工作。
-
<meta charset="UTF-8">必须是内第一个非空白、非注释节点，前面不能有<!-- -->、<script></script>或多余换行 - 用
file -i index.html（macOS/Linux）或Get-Content index.html -Encoding Byte | Select -First 3（PowerShell）确认无 BOM（ef bb bf） - VS Code 中保存时选 “UTF-8” 而非 “UTF-8 with BOM”；Sublime/Notepad++ 同理，状态栏显示 “UTF-8” 才算合规
为什么 <link> 和 <script></script> 的位置会影响预解析启动时机
预解析器只对位于 开始后、首个 或 <script></script>（含内联脚本）之前的资源生效。一旦遇到阻塞型 <script></script>，它立即停止扫描。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 把
<link rel="stylesheet">和<script src="..." async></script>放在靠前位置，且确保其前无<script></script>（含空的<script></script>） - 避免在
中写<script>console.log(1)</script>—— 即使内容为空，也会中断预解析 - 外部 CSS 必须用
<link>，不能用<style>@import url(...)</style>：预解析器不识别@import
为什么非法嵌套会让预解析器“看走眼”
预解析器依赖标签结构做资源提取，但遇到违反 content model 的嵌套（如 <p></p>
<div></div>
- 禁用所有 CSS 后打开 DevTools → Elements 面板，观察块级元素是否意外塌陷或错位——这是父容器被截断的信号，说明嵌套已触发重写
- CMS 输出、富文本编辑器生成的 HTML 是重灾区，它们常输出
<ul><p>item</p></ul>这类非法结构，必须在服务端清洗或用DOMParser二次标准化 - 用 W3C Validator 或 Chrome 的
Elements → ⋯ → Validate HTML功能验证，别只信“看起来能渲染”
真正难防的不是语法错误，而是那些“浏览器没报错、页面也显示了、但预解析器早就悄悄退出”的情况——它不抛异常，只默默变慢。每次改完 HTML，都该打开 Network 面板，过滤 css、js，看关键资源是不是在 TTFB 后 100ms 内发起请求。如果不是，问题大概率出在开头那 1024 字节里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
