小范围文字变更本身不引发全屏重排，但不当操作（如读取布局属性后立即修改）可能意外触发父容器甚至整个文档重排；应通过contain限制影响范围、固定容器尺寸、批量读写分离及启用合成层来优化。
小范围文字变更本身不会引发全屏重排，但若操作方式不当（比如读取布局属性后立即修改、或在非合成层中频繁触发样式计算），就可能意外牵连父容器甚至整个文档的布局计算，造成“本不该重排却重排了”的性能陷阱。关键不在文字本身，而在变更发生的上下文和渲染层级。
明确重排边界：用 contain 限制影响范围
给文字容器设置 contain: content 或更精确的 contain: layout paint style，能告诉浏览器：“这个元素及其子树的布局、绘制和样式变化，不会影响外部”。这样即使内部文本更新导致行高微调，也不会触发父级重排。
- contain: content 是最常用的安全选择，它隐含 layout + paint + style，适合独立模块（如卡片、列表项）
- 避免对 body 或大容器设 contain，它只应在语义上真正“自包含”的区域使用
- 注意兼容性：Chrome 52+、Firefox 69+、Safari 15.4+ 支持良好，移动端基本全覆盖
让文字变更只走重绘路径：避开布局属性依赖
文字内容变化（如 innerText、textContent 更新）本身不触发重排——前提是容器尺寸固定、不依赖内容撑开。一旦容器是 height: auto 或 display: inline-block 且无显式宽高，文字增减就可能改变高度，进而触发重排。
- 为文字容器设定固定 height 或 min-height，并配合 overflow: hidden 或 text-overflow: ellipsis，确保尺寸稳定
- 避免在文字容器上使用 vertical-align、line-height 过大导致基线浮动（尤其在 inline 元素中）
- 用 CSS 的 content-visibility: auto（对长列表/文章段落）可跳过不可见区域的布局计算，进一步缩小重排候选集
批量读写分离：防止强制同步布局
常见误操作：先读 offsetHeight 判断是否换行，再动态加 class 改文字样式——这会强制浏览器立刻重排以返回准确值，紧接着样式变更又触发一次重排。
- 所有读取类操作（offsetWidth、getBoundingClientRect、getComputedStyle）必须集中前置，不要穿插在写操作中间
- 改文字前，先缓存所需布局信息；全部读完后再统一写入新内容和样式
- 高频更新场景（如实时字幕）可用 requestAnimationFrame 聚合多次变更，确保单帧内只发生一次重排+重绘
启用合成层隔离：把文字渲染交给 GPU 图层
对频繁更新的文字块（如计数器、状态标签），用 will-change: transform 或 transform: translateZ(0) 升级为独立合成层。这样文字重绘仅发生在该图层内，不会污染主文档流的绘制任务。
- 优先用 will-change: transform（比 translateZ 更语义清晰，且支持自动降级）
- 切忌滥用：只为即将动画或高频更新的元素设置，用完及时移除（例如监听 transitionend 后清除）
- 配合 opacity 变更文字颜色时，同样走合成层路径，完全避开重绘主线程
