doctype前置字符触发怪异模式，导致盒模型错乱；html5语义标签在ie8–9中不创建dom节点；template.content直接appendchild会静默清空；嵌套过深或冗余包裹层拖慢首屏渲染。
DOCTYPE 前置字符触发怪异模式，直接导致盒模型错乱
只要 前面多一个空格、BOM 字节或注释，IE/Edge/旧 Safari 就会退化到怪异模式（Quirks Mode）——这时 <code>width 包含 padding，float 不触发 BFC，vertical-align 行为全乱。这不是样式写错了，是浏览器根本没按标准解析。
实操建议：
- 用 VS Code 打开文件，右下角确认编码是
UTF-8（不是UTF-8 with BOM） - 在 DevTools 的 Console 面板里搜
Quirks Mode，有提示就说明已中招 - 把
粘贴到文件最顶行，删掉所有前置字符，保存后硬刷新（<code>Ctrl+F5）
HTML5 语义标签在 IE8–9 中不创建 DOM 节点
<header></header>、<nav></nav> 这类标签在 IE8–9 里根本不存在，JS 里 document.querySelector('nav') 返回 null，CSS 里 nav { display: block } 完全无效——不是样式没生效，是节点压根没生成。
实操建议：
- IE8–9 必须加载
html5shiv.min.js，且脚本必须放在<link>CSS 之前 - 用条件注释精准投递：
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - DevTools 中选中
<nav></nav>，看 Computed 面板里display是不是block，再切不同浏览器对比 Box Model 数值
<template></template> 的 content 直接 appendChild 会静默清空
<template></template> 的 content 是只读的 DocumentFragment，不是普通节点树。直接 el.appendChild(template.content) 会把内容“搬走”，第二次调用就返回空文档片段——控制台不报错，后续渲染全失效，极难排查。
实操建议：
- 必须用
document.importNode(template.content, true)或template.content.cloneNode(true)获取可操作副本 -
cloneNode(true)更常用，但它不会保留事件监听器或已绑定的data-状态 - 若需查子元素，得先克隆再
querySelector；在原始content上直接调用会返回null - ID 冲突要主动处理：克隆后若存在重复
id="modal-close"，后续document.getElementById只取第一个
嵌套过深或无意义包裹层拖慢首屏渲染
<div><div><div>
<p> 这类结构会让浏览器多做几次节点创建 + 样式匹配 + 布局计算，移动端上 FCP 明显变慢。不是“能跑就行”，是真实影响用户看到内容的时间。</p>
<p>实操建议：</p>
<ul>
<li>用 Chrome DevTools → Elements 面板右键任意节点 → <code>Show DOM properties 查看 depth 值，超过 6 就要警惕
<section></section>、<header></header> 替代纯 <div> 堆叠的，优先替换——它们不增加渲染开销，还能简化 CSS 选择器
<li>表格单元格里别套 <code><div>：比如 <code><td><div class="wrapper">
<p>，这种极易触发重排
</p>
<li>删掉调试时随手加的 <code><div id="debug-wrapper">、空的 <code><center></center> 或为兼容老版本硬塞的冗余标签
最容易被忽略的，是那些“看起来正常”的地方：比如 <template></template> 里写了 <script></script> 却没意识到它被浏览器明确忽略；又比如服务端已输出部分结构，前端再用 <template></template> 补充，但 id、data-state、表单焦点这些状态根本没同步过去。
