hongweifei/dsh-chat-content-visibility-auto

README 摘要

dsh-chat-content-visibility-auto DeepSeek Harness（DSH）聊天列表性能优化插件：为会话消息节点启用浏览器原生 content-visibility: auto （近似虚拟化），跳过屏外消息节点的渲染/布局/绘制。 解决的问题 DSH 的聊天列表（ dsh-client-ui-conversation 的 ChatView ） 没有虚拟滚动、也没有使用 content-visibility ——它对会话里每一个消息节点全量渲染（ order.map(...) 每个节点一个 div[data-chat-anchor-key] ，内含 markdown、工具卡、图片等重 DOM），长会话的 DOM 数量线性增长，滚动、输入、切换都卡。唯一现有优化是 React.memo （减少重渲染，但不减少 DOM）。 注：DSH 的 轨迹面板 （ dsh-client-ui-trajectory ）用了 @tanstack/react-virtual 做真虚拟滚动，但主聊天列表没有；全代码库亦无任何 content-visibility 实际使用。 修复方式 注入一段 CSS： content-visibility: auto 让浏览器 跳过屏外节点的渲染、布局与绘制 ，只绘制可视窗口附近的节点； contain-intrinsic-size: auto 320px 为未渲染过的节点提供尺寸估算，保证滚动条位置和滚动锚定稳定。 - 零产品逻辑改动：纯样式叠加，不替换任何槽位，不碰 DOM 结构 - 节点滚动到可视区时按真实尺寸渲染；DOM 本身不变（内存不降，但渲染/布局/绘制成本大幅下降） - 浏览器不支持该属性时规则被忽略，无副作用（Chrome 85+、Firefox 125+、Safari 18+） 安装 手动安装（github 不可达时） 验证效果 1. 打开一个很长的会话（几百条消息），滚动到底/中部，应明显顺滑； 2. DevTools → Elements：选中一个 视口外 的聊天节点，其样式面板中 content-visibility: auto 生效，浏览器不会为它执行布局/绘制； 3. DevTools → Performance 录制滚动操作，长帧（long task）明显减少。 卸载 局限 - 不是真正的窗口化：DOM 节点数量不变（内存占用不降），只是跳过渲染成本 - 聊天节点的弹出层若溢出节点边界会被 paint 裁剪（当前 DSH 节点内弹出层均内联且自带 overflow:hidden ，无影响） License MIT

分类