data-i18n 是纯存储的自定义属性，不触发重绘；真正触发重绘的是后续js修改textcontent或innerhtml的操作，需批量更新并避免隐式布局触发。
data-i18n 属性本身不会触发重绘
data-i18n 只是自定义属性，浏览器完全忽略它——既不解析、不渲染、也不参与样式计算。它只是个“标签”，像便签纸贴在 DOM 节点上，纯存储用途。真正触发重绘的，永远是后续你用 JS 读取它、再拿值去改 textContent 或 innerHTML 的那一步。
为什么给元素加 data-i18n 后切换语言还是卡
常见错误是：遍历所有带 data-i18n 的元素，对每个都单独设 el.textContent = langMap[key]。这等于在循环里连续触发几十次独立重绘请求，浏览器无法合并。
- ✅ 正确做法：先用
document.querySelectorAll('[data-i18n]')收集全部节点，再一次性遍历赋值 - ✅ 更优做法：把所有待更新节点塞进
DocumentFragment，最后用replaceChildren()（Chrome 120+/Safari 17.4+）或innerHTML批量替换（注意 XSS 防御） - ❌ 错误模式：
for (const el of els) { el.textContent = ... }—— 每次赋值都可能被浏览器当作一帧起点处理
data-i18n 更新时怎么防止意外重排
只改文本内容本不该重排，但实际中常因 CSS 隐式依赖尺寸而破防。比如容器用了 width: fit-content，文字变长后宽度撑开，父级高度微调，连带周围元素位移——这就是重排。
- 确保所有含
data-i18n的元素，其 CSS 不含width: fit-content、height: auto、line-clamp等依赖内容尺寸的声明 - 表单控件如
<input>，只更新placeholder、title、aria-label；别碰value，否则清空用户输入 - 设
title时用el.setAttribute('title', ...)，不用el.title = ...—— IE11 下后者可能隐式触发重排 - 切换前临时加
el.style.pointerEvents = 'none'，更新完立刻恢复，避免用户点击打断渲染队列
如何让 data-i18n 切换视觉无感
“无感”不是不重绘，而是让用户察觉不到闪动或跳变。关键在是否发生在同一帧内、是否隔离绘制区域。
- 语言初始化必须在
DOMContentLoaded前完成，否则首屏先刷默认语言，再刷目标语言，必然闪屏 - 给语言容器加
contain: paint，例如<main class="i18n-region"></main>+.i18n-region { contain: paint; }，限制重绘扩散 - 长列表区域别整块
innerHTML替换，改用DocumentFragment组装新节点，最后replaceChildren() - 绝对不要在
requestAnimationFrame回调里先读getBoundingClientRect()再更新文本——读操作会强制 flush 样式，破坏合并机会
data-i18n，而是确保它背后那一整条更新链路：从查询、读取、翻译、赋值到样式响应，全程不引入任何 layout 触发点。多数人卡在“以为加了属性就完了”，其实刚起步。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
