html字符串比对无效，因不同浏览器渲染差异显著；应基于渲染树做像素级比对，并提取标准化dom快照，严格处理lang属性与字体回退链。
为什么直接比对 HTML 字符串完全没用
HTML 字符串一致 ≠ 渲染一致。Chromium、WebKit、Gecko 对同一段 HTML 的解析规则、盒模型计算、字体回退链、甚至空格折叠行为都不同。比如 Safari 对 <sub></sub> 基线偏移比 Chrome 小 0.8px，Firefox 在 white-space: normal 下可能多折一次行——这些差异肉眼难察，但会破坏 PDF 导出、截图比对或屏幕阅读器语义识别。
必须基于渲染树做像素级比对
真正要捕获的是浏览器落地后的像素布局和语义结构，不是源码字符串。推荐用 Playwright 启动 Chromium/Firefox/WebKit 三端并行，配合视觉差分工具（如 Percy 或自建 OpenCV 服务）：
- 显式指定
viewport和deviceScaleFactor，例如 WebKit 必须设deviceScaleFactor: 2，否则默认 1x 缩放导致字体模糊、rem计算偏差 - 禁用抗锯齿干扰：Chromium 加
--disable-lcd-text --disable-remote-fonts；WebKit 需 patchWKWebViewConfiguration.defaultWebpagePreferences关闭字体平滑 - 截图前强制重排：
await page.evaluate(() => window.dispatchEvent(new Event('resize')))，避免初始尺寸未稳定导致布局抖动 - 容差阈值设为 3%～5%，但文字区域单独设
text: { threshold: 0.5 }，防止字体 hinting 差异误报
DOM 快照比 innerHTML 更可靠
比起比对原始 HTML，提取标准化 DOM 快照更可控：
- 过滤掉动态 class、内联
style、data-*属性（除data-test-id），只保留tag、id、aria-*、role、textContent.trim().slice(0, 50) - 用
page.evaluate()提取快照，例如：document.querySelectorAll('header, nav, main').forEach(el => ...) - 特别注意 Shadow DOM：默认快照不包含
shadowRoot内容，需显式递归遍历el.shadowRoot?.children并合并 - 表格、列表等语义结构要做深度校验：
table > tbody > tr是否存在、ol > li的value是否连续，不能只看标签名
lang 属性变更后视觉是否同步生效？
document.documentElement.lang = 'ja' 这行代码本身不会触发重绘或重解析。浏览器和辅助技术只读取首屏 HTML 中的 。JS 动态设置只是改了个属性值，:lang(ja) 样式、屏幕阅读器发音引擎、Chrome 翻译按钮都不会响应。
- 纯前端 SPA 必须整页刷新（
window.location.href）或重写document.documentElement.outerHTML（但 ARIA 缓存清不干净，慎用） - SSR 项目要在模板中根据请求头注入正确
lang，静态站应每个语言版本生成独立 HTML 文件并硬编码 - 局部混排内容（如
<p lang="en">API</p>）必须显式标注lang，不能靠继承；切换时需遍历所有已带lang属性的元素同步更新 -
lang值必须严格符合 BCP 47：写zh-CN而非zh_CN或Chinese，否则搜索引擎忽略、语音引擎朗读错、:lang()样式完全不匹配
lang、替换了文本、甚至写了 dir="rtl"，但没验证字体回退链是否真的加载了对应语言字形——比如日语页面缺 lang="ja"，假名就显示成方块，而这个在 DOM 快照里根本看不出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
