Tokenizer阶段字符解码不一致会导致DOM错乱，如<div>被切为<di+v>；模板未闭合、Data-URI图片、innerHTML注入及BOM/空格干扰亦会引发类似问题。
Tokenizer阶段字符解码不一致导致DOM错乱
HTML解析器在Tokenizer阶段把字节流转成Unicode字符时，若HTTP响应头Content-Type声明的charset与HTML内<meta charset="...">不一致，或文件实际编码（如GBK）与声明编码（如UTF-8）不符，就会产生错位Token。典型现象是<div>被切开成<di+v>，<script>变成<scri+pt>，注释<!--后半截消失。
排查要点：
- 用
curl -I检查响应头Content-Type中的charset是否与<meta charset>一致 - 用
file -i index.html或VS Code底部编码栏确认文件真实编码 - Node.js中用
Buffer.toString('utf8')读取HTML时，若源文件含BOM，会多出\uFEFF，可能干扰Tokenizer——改用fs.readFileSync(path, 'utf8').replace(/^\uFEFF/, '') - DevTools → Elements面板里观察DOM结构是否“看起来正常但选不到”，右键“查看网页源代码”对比原始字符串，差异即Tokenizer产出异常
模板引擎注入未闭合语法引发浏览器自动补全
Mustache、Handlebars、Thymeleaf等服务端/客户端模板若漏写{{/if}}、{{/each}}或</div>，生成的HTML就缺结束标签。浏览器不会报错，而是静默补全，结果DOM层级错位：比如<p><div>content</p>会被修正为<p></p><div>content</div>，导致CSS失效、querySelector查不到目标节点。
关键判断方式：
立即学习“前端免费学习笔记（深入）”；
- 打开DevTools → Elements，右键任意元素 → “Edit as HTML”，修改后刷新看是否还原——若不能还原，说明DOM已被浏览器重排过
- 执行
document.body.innerHTML（修正后DOM）和document.querySelector('template').innerHTML（原始模板）对比，差异即模板漏洞位置 - 启用ESLint插件
eslint-plugin-mustache或eslint-plugin-handlebars，禁止未闭合语法
Data-URI图片阻塞HTML解析导致白屏
不是加载慢，是Tokenizer卡在超长base64字符串上。每个data:image/png;base64,...都会被当作一个超大Token处理，逐字符扫描、内存分配、预解码，直接拖慢Parse HTML阶段。实测100个20KB Data-URI可让DOMContentLoaded延迟300ms+，低端机滚动卡顿。
快速确认方法：
- DevTools → Network → 找HTML请求 → Response标签页搜索
data:image/，密密麻麻就是它 - Performance面板录制刷新，展开Main线程，定位
Parse HTML耗时是否异常高 - 运行
document.querySelectorAll('img[src^="data:"]').length统计数量 - 注意：哪怕
display: none或包在<template>里，只要被Tokenizer扫到，解码就已启动
innerHTML动态插入含脚本内容时的Tokenizer绕过
el.innerHTML = <div>${data}</div>这种写法，若data含<script>且未经htmlspecialchars()二次转义，Tokenizer仍会识别为脚本Token——因为htmlspecialchars()只转义<为，但JS拼接后<code><script>>又被浏览器HTML解码回<code><script>，最终执行。
真正安全的做法：
- 服务端用
htmlspecialchars($str, ENT_NOQUOTES | ENT_SUBSTITUTE, 'UTF-8')，确保<、>、&全转义 - 前端避免用
innerHTML插入不可信数据；必须用时，先用DOMPurify.sanitize()过滤 - 警惕JSON嵌套场景：
JSON.stringify()输出若直接插进innerHTML，引号逃逸后仍可注入——应走textContent或setAttribute - BOM、多余空格、非ASCII空格（如
\u200B）都可能干扰Tokenizer对<script>边界的识别，需统一清洗
