React AI 长会话虚拟化：动态高度、滚动锚定与 CLS 门禁

AI 会话不是普通定高列表：回答会在流式阶段增长，代码高亮后换行，引用面板会展开，图片和字体也可能晚到。只按平均高度计算窗口，加载更早历史时就会把用户正在阅读的段落推走；直接渲染全部记录则让 DOM、样式计算和无障碍树随会话无限增长。React 虚拟化 介绍窗口化原理，本篇只解决动态高度与锚点不变量。

验收夹具必须包含真实高度变化

固定生成 10000 条消息，使用不可变 messageId，混合单行文本、20 行代码、表格、折叠引用和带固有尺寸的图片。初始打开最近 80 条，向上滚动到第 5000 条后 prepend 100 条历史；同时让视口内一段代码完成高亮、两张图片晚 800 毫秒解码，底部活动回答再增长 200 次。批准矩阵记录 React 19.2.4、浏览器完整版本、缩放比例、字体摘要、视口和设备像素比。

发布门要求：任意时刻消息 DOM 节点不超过 220 个；prepend 前后锚点顶部坐标漂移 P95 不超过 2 CSS px、最大不超过 8 px；用户离底部超过 48 px 时，新 token 导致的自动滚动次数为 0；停留底部时每次绘制后仍在底部容差 2 px 内；无近期输入的 layout-shift 累计值低于 0.02；ResizeObserver 每帧触发的状态提交最多一次。内存只比较同一构建与浏览器下的稳定堆基线，要求十次来回滚动后的保留量不增长超过 10%，不把一次 GC 时点当结论。

CLS 是视口级信号，不能单独证明滚动容器稳定。测试同时记录目标消息的 getBoundingClientRect().top、scrollTop、窗口范围和 layout-shift 条目。Web Vitals 实验室与现场数据 可解释两类环境差异，但锚点漂移必须用这套确定性夹具逐提交计算。

高度缓存以消息版本为单位

估算器用消息类型给首次高度，真实元素挂载后由 ResizeObserver 测量 border box。缓存键是 messageId + renderRevision + widthBucket + fontRevision，不能用数组下标；Markdown 完成、引用展开、容器跨宽度档或字体改变时，只使相关键失效。禁用原生 scroll anchoring 时，Observer 在 layout 后、paint 前拿已保存锚点和高度差直接修正 scrollTop，使图片或字体晚到不会先绘制一次跳动；React 高度模型和窗口范围仍在下一帧批量更新。回调不得读取刚写入后再次强制布局，也不能在同一轮反复 setState；实现无法保证这条顺序时，应保留浏览器原生 anchoring 负责资源晚到，而不是同时关闭两套补偿。

流式活动消息可以限制为每帧一次高度修正。窗口外历史消息不因为当前回答增长而换引用，列表外层状态也不重建全部 item 数据。React 列表性能优化 中的稳定 key 在这里是正确性条件：索引 key 会让 prepend 后的高度、焦点和组件本地状态绑定到错误消息。

显式锚点覆盖三种滚动意图

每次结构变更前选择锚点：用户在底部容差内时锚定列表末端；正在阅读历史时选择第一个完整可见消息，并保存其 ID 与顶部偏移；程序跳转搜索结果时锚定目标 ID。commit 后在布局效果阶段找到同一消息，用新旧顶部差修正 scrollTop。一次发布只能由一套系统负责补偿：若虚拟器采用手动锚定，滚动容器设置受控的 overflow-anchor: none，避免浏览器原生 Scroll Anchoring 再补一次。

锚点消息被删除或窗口重算后不可见时，按相邻稳定 ID 回退，不按旧数组下标猜测。高度变化发生在锚点上方才补偿；发生在锚点内部时保持其顶部，允许下方内容自然增长。用户主动滚轮、触摸或拖动滚动条时冻结自动“贴底”，直到明确回到底部。焦点若位于将被移出窗口的控件，先把焦点迁到有语义的会话容器，并提供返回原消息的动作，不能为省 DOM 让键盘焦点消失。React 可访问性组件 中的焦点原则同样适用。

从像素故障演练到可逆发布

Playwright 用固定字体与截图之外的数值断言重放：连续 prepend 五页、在锚点上方展开引用、字体加载失败后替换、图片无尺寸、容器横竖屏切换、消息删除、搜索跳转和旧流晚到。每个 animation frame 都保存锚点 ID、顶部偏移、高度缓存命中、DOM 数与 observer 批次数，既检查最终稳定坐标，也阻止中间一帧先跳后补。截图只能帮助定位，不能替代 2 px 合同。

灰度先用于超过 1000 条的只读历史，活动回答仍走旧列表；随后切 1% 长会话并按浏览器分组观察锚点漂移、底部误跳和错误率。回滚目标是分页窗口，而不是重新渲染 10000 条：功能开关停止虚拟器测量，保留当前锚点 ID，装载包含该 ID 的上一版分页并恢复偏移。任一浏览器最大漂移超过 8 px、焦点丢失、DOM 越界或保留内存连续增长即回滚。

延伸阅读

• React 虚拟化
• React 性能优化
• Web Vitals 现场与实验室数据
• React 可访问性组件