核心问题是冗余结构与不规范写法触发无效遍历和重解析：重复属性使html2text耗时翻倍，内联style导致css解析占比超40%，id重复引发缓存覆盖，深层嵌套每增100节点拖慢解析20–40ms。
HTML页面引发引擎重复解析，核心问题不在“写了什么”，而在“怎么写”——浏览器或解析库（如 html2text、dumb_css_parser）对冗余结构、非法语义、不规范属性的处理逻辑，会触发多次无效遍历、重解析甚至缓存失效。
重复属性（class/style/id）导致解析器反复扫描
浏览器本身对重复属性（如 class="a" class="b"）按规范只取最后一个，但很多 HTML 解析库（尤其是纯 Python 实现的 html2text）不做去重，直接把全部属性原样塞进 attrs 列表。后续提取类名、解析内联样式时，就得反复遍历这些冗余项。
- 典型现象：
handle_starttag耗时翻倍，尤其在含数百个<div class="item"> 的模板中 <li>内联 <code>style="color:red; color:blue;"会让dumb_css_parser对每条声明都 tokenize + 构建字典，50 个同类标签就能让 CSS 解析占总耗时 40% 以上 -
id重复更隐蔽：DOM 查询只返回第一个，而某些解析器用id当哈希键缓存节点，导致覆盖和引用丢失 - 调用
html2text前，用正则或DOMParser预处理 HTML：对每个标签的class、style、id属性做合并/去重，只保留最后一个值 - 禁用内联
style，改用class引用外部样式表；若必须保留，构建阶段用cssnano压缩清理，别留到运行时硬扛 - 模板循环生成元素时，确保
id唯一化（如加索引：id="item-1"），别用静态id="item" -
<p></p>里直接放<div>：Chrome/Firefox 会自动闭合 <code><p></p>，再开<div>，造成意外换行 <li> <code><form></form>里嵌另一个<form></form>：内层被完全忽略，submit 事件只响应外层 - 用
document.head.appendChild()动态插入<link rel="canonical">：搜索引擎只读初始源码，这个标签等于不存在 -
<meta charset>必须紧贴开始，前面只允许 DOCTYPE 和空白符；用curl -s your-page.html | head -c 1024 | hexdump -C验证是否落在前 1024 字节内 -
<script></script>同步加载一律移到前；业务逻辑脚本优先用defer，统计脚本用async（确认不依赖 DOM） - 所有
<link rel="canonical">必须手写在 HTML 源码的内，且唯一、闭合、href 为绝对 URL（含协议、域名、末尾斜杠）
实操建议：
深层嵌套与无意义容器拖慢 DOM 构建
浏览器解析 HTML 不是线性读完就完，它要边读边建树、推导语义、匹配 CSS、预判资源。每多一层无意义的 <div>，就多一次节点创建、父子关系确认、样式继承链试探——这些开销加起来，DOM 节点每增 100 个，平均拖慢解析 20–40ms。
<ul><li>常见坑：CMS 导出的 <code><div data-id="123">、空注释、<code><section><div>
<h2> 这种断裂嵌套
</h2>
<li>语义标签（<code><header></header>、<nav></nav>）有内部优化路径，<div class="header"> 则走通用流程，无红利
<p>实操建议：</p>
<ul>
<li>打开 DevTools → Elements 面板，右键可疑节点 → “Break on subtree modifications”，交互后看哪些包裹层根本没变化</li>
<li>用 CSS 选择器搜索 <code>div[class]，逐个检查对应 class 是否真在 CSS 中有规则；没匹配的，连同整个 <div class="xxx"> 一并删掉
<li>把 <code><div class="main-header"> 改成 <code><header class="main-header"></header>，类名不动，只换标签；避免 <section><div>
<h2>，让 <code><h2></h2> 直接子级于 <section></section>
动态注入与非法嵌套触发静默修复
浏览器不会报错，但会按 HTML5 Tree Builder 规范自动“容错修复”非法结构。这种修复不是免费的——它改变 DOM 树实际形态，导致样式错位、脚本查不到节点、辅助技术遍历异常，还可能让解析器多走几轮校验分支。
实操建议：
真正卡住解析的，往往不是大图或长 JS，而是几百个重复 class、五层嵌套的 <div>、或者一个被浏览器悄悄闭合又重建的 <code><p></p>。这些细节不报错，但会持续放大解析负担——越晚发现，越难定位。
