核心问题是冗余结构与不规范写法触发无效遍历和重解析：重复属性使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">的模板中 - 内联
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"
深层嵌套与无意义容器拖慢 DOM 构建
浏览器解析 HTML 不是线性读完就完，它要边读边建树、推导语义、匹配 CSS、预判资源。每多一层无意义的 <div>，就多一次节点创建、父子关系确认、样式继承链试探——这些开销加起来，DOM 节点每增 100 个，平均拖慢解析 20–40ms。
立即学习“前端免费学习笔记（深入）”；
- 常见坑：CMS 导出的
<div data-id="123">、空注释、<section><div><h2>这种断裂嵌套 - 语义标签（
<header>、<nav>）有内部优化路径，<div class="header">则走通用流程，无红利
实操建议：
- 打开 DevTools → Elements 面板，右键可疑节点 → “Break on subtree modifications”，交互后看哪些包裹层根本没变化
- 用 CSS 选择器搜索
div[class]，逐个检查对应class是否真在 CSS 中有规则；没匹配的，连同整个<div class="xxx">一并删掉 - 把
<div class="main-header">改成<header class="main-header">，类名不动，只换标签；避免<section><div><h2>，让<h2>直接子级于<section>
动态注入与非法嵌套触发静默修复
浏览器不会报错，但会按 HTML5 Tree Builder 规范自动“容错修复”非法结构。这种修复不是免费的——它改变 DOM 树实际形态，导致样式错位、脚本查不到节点、辅助技术遍历异常，还可能让解析器多走几轮校验分支。
-
<p>里直接放<div>：Chrome/Firefox 会自动闭合<p>，再开<div>，造成意外换行 -
<form>里嵌另一个<form>：内层被完全忽略，submit 事件只响应外层 - 用
document.head.appendChild()动态插入<link rel="canonical">：搜索引擎只读初始源码，这个标签等于不存在
实操建议：
-
<meta charset>必须紧贴<head>开始，前面只允许 DOCTYPE 和空白符；用curl -s your-page.html | head -c 1024 | hexdump -C验证是否落在前 1024 字节内 -
<script>同步加载一律移到</body>前；业务逻辑脚本优先用defer，统计脚本用async（确认不依赖 DOM） - 所有
<link rel="canonical">必须手写在 HTML 源码的<head>内，且唯一、闭合、href 为绝对 URL（含协议、域名、末尾斜杠）
真正卡住解析的，往往不是大图或长 JS，而是几百个重复 class、五层嵌套的 <div>、或者一个被浏览器悄悄闭合又重建的 <p>。这些细节不报错，但会持续放大解析负担——越晚发现，越难定位。
