HTML国际化怎么统计？埋点采集工程化维护-html教程-PHP中文网

应以用户实际看到并交互的语言为准，通过document.documentelement.lang获取ui_lang，结合lang_source、lang_changed_at等字段埋点，并扫描未标记data-i18n的文本节点，上报时携带locale_file、locale_version及脱敏missing_keys。

html国际化怎么统计？埋点采集工程化维护

怎么统计用户实际使用的语言而非浏览器声明

只读 navigator.language 或 Accept-Language 头会漏掉大量真实行为：用户手动切换过语言、用隐私模式访问、安卓 WebView 返回空值、或企业内网强制设为 en-US 但实际看中文页面。真实语言必须以「用户最终看到并交互的语言」为准。

埋点字段应包含：ui_lang（当前 DOM 中 document.documentElement.lang 值）、lang_source（来源：url、localStorage、navigator、fallback）、lang_changed_at（毫秒级时间戳）。不要只记键名如 "zh"，必须用完整 BCP 47 格式，比如 "zh-Hans-CN" —— 否则无法区分简体中文和繁体中文的字体回退差异。

每次调用翻译函数后立即触发埋点，不是页面加载时一次上报
动态插入的弹窗、表格行、懒加载模块，其内部语言状态必须单独采集，不能复用父容器的 ui_lang
避免在 fetch 加载语言包失败时仍上报 ui_lang，应加 try/catch 判断是否真正完成渲染

data-i18n 元素漏埋点怎么自动发现

靠人工检查 data-i18n 属性极易遗漏，尤其 placeholder/title/alt 这些需额外后缀的属性。工程化做法是启动时扫描全部带文本内容的元素，比对是否已标记可翻译属性。

示例逻辑：

const textNodes = Array.from(document.querySelectorAll(':not(script):not(style):not(template) *'))
  .filter(el => el.textContent.trim() && !el.hasAttribute('data-i18n') && !el.hasAttribute('data-i18n-placeholder'));

textNodes.forEach(el => console.warn('Missing i18n:', el.outerHTML));

扫描范围排除 <script></script>、<style></style>、<template></template> —— 它们不参与文本渲染，加 data-i18n 无效
对 <input>、<textarea></textarea> 必须同时检查 placeholder 属性是否配了 data-i18n-placeholder
对 <img> 必须检查 alt 是否配了 data-i18n-alt；title 同理
CI 流程中可将此扫描逻辑作为 lint 步骤，失败则阻断构建

埋点数据怎么关联到具体语言包版本和缺失项

用户看到乱码或英文残留，往往不是前端代码问题，而是语言包字段缺失或格式错误。埋点必须携带语言包元信息，否则无法定位是哪条 key 没填、哪个文件加载失败。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

关键字段：

locale_file：实际加载的路径，如 "./locales/zh-Hans.json"
locale_version：语言包文件的 hash 或 git commit id（构建时注入）
missing_keys：数组，记录本次渲染中查不到的 key，如 ["form.submit", "error.network"]
fallback_used：布尔值，标识是否触发了降级（如从 zh-HK fallback 到 zh）

注意：不要在生产环境直接上报完整缺失 key 列表（可能泄露业务结构），可用哈希脱敏：sha256("form.submit")。

为什么滚动位置恢复和埋点顺序不能颠倒

语言切换后若先恢复滚动再上报埋点，会出现「用户还没看到新语言文字，埋点已发出去」的情况 —— 因为 DOM 更新是异步的，textContent 替换和 lang 属性同步可能尚未完成，此时采集的 ui_lang 是旧值，missing_keys 也可能是上一轮残留。

正确顺序：更新所有 DOM → 同步设置 document.documentElement.lang → 调用 window.scrollTo() → 最后触发埋点
对含 innerHTML 的节点，必须等 HTML 片段解析完毕（可用 requestIdleCallback 延迟埋点）
第三方组件（如日期选择器）的语言切换回调完成后再发埋点，否则 Intl 实例未重建，时间格式仍是旧语言

最易被忽略的是动态节点：AJAX 插入的表格行、弹窗内容，它们的埋点必须在插入后立即执行，而不是等全局翻译函数跑完 —— 因为全局函数可能跳过已处理过的节点。