document.compatMode 是判断浏览器渲染模式的唯一可靠依据：返回“CSS1Compat”为标准模式，“BackCompat”为怪异模式；该值在页面加载初期即锁定，前置任何字符（含BOM、注释、空格）都会触发怪异模式。
document.compatMode 是唯一可信的模式判断依据
别信开发者工具里任何“Document Mode”字段——Chrome 和 Firefox 已彻底移除该显示；也别靠“看起来居中了”来判断。打开控制台，直接执行：document.compatMode。只看返回值："CSS1Compat" 是标准模式，"BackCompat" 就是怪异模式。
这个值在 JS 执行前就已锁定，后续 JS 无法挽回。它决定整页 CSS 和 JS 行为是否漂移：比如 height: 50% 在父元素无高度时，怪异模式下直接当 0 处理；document.scrollingElement 在怪异模式下指向 body，而非 html，影响滚动监听和 rem 基准。
DOCTYPE 必须是文件第一个字节，零容忍前置字符
必须严格位于整个文件的第一个字节。前置任何内容——哪怕是一行注释 <code><!-- 注释 -->、一个换行符 \n、UTF-8 BOM（EF BB BF）——都会触发怪异模式。
构建时容易被忽略的陷阱：
立即学习“前端免费学习笔记（深入）”；
- 某些 CMS 或模板引擎会在
<head>前自动注入 meta 或 script - Webpack 插件（如
html-webpack-plugin）默认 inject 逻辑可能插入不可见字符 - VS Code 保存时若启用了 “BOM on save”，会静默添加 BOM
HTML 解析流程从字节流开始，不是从标签开始
浏览器解析 HTML 是流式过程，不等完整下载就启动。第一步是词法分析（tokenization），把原始字节流切分为 <html>、lang="zh-CN"、文本内容等 tokens；第二步是构建 DOM 树，按嵌套关系组织节点；第三步才并行下载和解析 CSS，生成 CSSOM。
关键事实：
-
<head>中的<link rel="preload">或<script defer>会影响资源加载优先级，但不会阻塞 tokenization -
<meta charset="UTF-8">必须在<head>前 1024 字节内出现，否则浏览器可能用错误编码解析后续内容 - 未闭合的
<p>或嵌套错误（如<div><p><span></div>）由解析器按容错规则自动修复，不报错但 DOM 结构与预期不同
为什么删掉 DOCTYPE 页面还能显示
因为浏览器有降级兜底机制：启用怪异模式模拟 IE5 行为。盒模型变成 border-box，getComputedStyle 返回值异常，document.body.clientWidth 计算逻辑不同。这些差异不报错，但会让布局在不同浏览器间表现不一致。
真正复杂的是：这些问题往往只在特定缩放比例、特定设备或嵌套较深时才浮现。例如一个 width: 200px 元素加了 padding: 10px 和 border: 2px，怪异模式下实际占宽仍是 200px，标准模式下是 224px——肉眼难辨，调试成本远高于一开始就确保 <!DOCTYPE html> 干净落位。
