重复属性会拖慢tokenizer，但浏览器不报错：html解析器（blink/webkit）在tokenizer阶段需逐个识别、哈希比对、跳过重复属性，实测200处重复class使tokenizer耗时上升8–12ms；id、src、data-id等重复会导致dom查找错乱、多余请求或数据覆盖，而工具链默认静默忽略，需通过parse5/tokenize校验、html-validate-loader或htmlhint主动拦截。
重复属性会拖慢 Tokenizer，但浏览器不报错
HTML 解析器（Blink/WebKit）在 Tokenizer 阶段必须逐个识别、比对、跳过重复属性，哪怕最终它被静默丢弃。实测 200 处重复 class 可使 Tokenizer 耗时上升 8–12ms（低端安卓机超 25ms）。这不是渲染问题，是解析卡点。
常见错误现象包括：
-
id="header" id="footer"→document.getElementById("header")仍返回第一个节点，但后续逻辑可能误判 DOM 结构 -
src="a.jpg" src="b.jpg"→ 浏览器尝试发起两次请求（第二次常被缓存拦截，但仍占网络队列） -
data-id="1" data-id="2"→element.dataset.id只返回"2"，数据被覆盖却无提示
构建阶段可加一层轻量校验：
- 用
parse5.tokenize+ 自定义 handler，在startTag事件中维护 per-tag 的Set记录已见属性名，重复即 warn - Webpack 用户可直接接入
html-validate-loader，启用attr-duplication规则 - VS Code 中装
HTMLHint插件，开启attr-no-duplication，保存即标红
自定义标签如 <my-header></my-header> 不触发语义行为
浏览器把 <my-header></my-header>、<_html></_html> 这类非标准标签当作无语义的 HTMLElement，node.role 为空，getComputedStyle(el).display 默认为 "inline"，无障碍树中只读作 “group”。
关键影响不是样式错乱，而是语义链断裂：
-
<custom-section><h2>标题</h2></custom-section>→<h2></h2>仍算全局二级标题，不重置大纲层级 -
document.querySelectorAll(':scope > h2')在<custom-section></custom-section>内完全不匹配 -
<_html><_head><title>测试</title></_head></_html>→ DOM 中生成孤立节点，无父子关系
若坚持用自定义标签，必须手动补全且不可省略：
- 显式设
display: block或display: flex（默认 inline 会挤成一行） - 加
role同时配aria-labelledby或aria-label，且确保引用的id存在且可访问 - 内部子元素必须用标准标签（如
<h2></h2>、<p></p>），否则 SEO 和无障碍双失效
<script type="module"></script> 改变预解析路径
type 属性本身不阻塞预解析，但类型决定是否进入预加载流程：type="text/javascript"（或省略）才触发外链脚本的预加载；type="module" 则启动模块图静态分析，而 type="text/html" 直接被跳过。
容易踩的坑：
- 写了
<script src="init.js" type="text/ecmascript"></script>→ 预解析器忽略，资源发现延迟到主解析器执行时 -
type="module"中含import('./' + name + '.js')→ 动态路径无法静态分析，不会预加载 - 内联脚本（无
src）无论type是什么都**不参与预解析**，别指望它被提前发现
验证方式：打开 Chrome DevTools → Network 面板，对比有无 type 声明时，脚本的 Initiator 是 Parser 还是 Other。
Python 的 HTMLParser 对属性处理很“原始”
HTMLParser 的 handle_starttag(tag, attrs) 方法拿到的 attrs 是原始元组列表，比如 [('class', 'a'), ('class', 'b')]，它不做任何去重或覆盖逻辑——你得自己处理。
典型问题场景：
- 用它做 HTML 转文本（
html2text底层依赖它）时，重复class会让handle_starttag耗时翻倍（因后续遍历冗余项） - 内联
style="color:red; color:blue;"被原样传入，CSS 解析器需反复 tokenize 冲突声明
简单修复建议：
- 预处理 HTML 字符串：用正则移除重复属性，或先用
DOMParser（JS）/BeautifulSoup（Python）清洗再喂给HTMLParser - monkey patch
handle_starttag：对attrs做list(dict(attrs).items())，保留最后一个值 - 避免在循环里拼重复属性字符串再 parse——这种“假批量”反而放大开销
真正难处理的不是语法错误，而是那些浏览器默默吞掉、工具链默认放行、但会在 Tokenizer、无障碍树、预解析器、dataset API 等多个层面引发连锁偏差的“合法非法操作”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
