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：

[data-chat-flow] > [data-chat-anchor-key] {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

content-visibility: auto 让浏览器跳过屏外节点的渲染、布局与绘制，只绘制可视窗口附近的节点；contain-intrinsic-size: auto 320px 为未渲染过的节点提供尺寸估算，保证滚动条位置和滚动锚定稳定。

• 零产品逻辑改动：纯样式叠加，不替换任何槽位，不碰 DOM 结构
• 节点滚动到可视区时按真实尺寸渲染；DOM 本身不变（内存不降，但渲染/布局/绘制成本大幅下降）
• 浏览器不支持该属性时规则被忽略，无副作用（Chrome 85+、Firefox 125+、Safari 18+）

安装

# 从 GitHub 安装
dsh plugin --profile web add "github:hongweifei/dsh-chat-content-visibility-auto"

# 重启 dsh web 并硬刷新浏览器（Ctrl+F5）

手动安装（github 不可达时）

# 1. 把插件源码目录链接进 profile 的 node_modules（<插件源码绝对路径> 换成实际路径）
New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\@dsh-external\dsh-chat-content-visibility-auto" -Target "<插件源码绝对路径>"

# 2. 在 profiles\web\package.json 中补两处：
#    dependencies 加   "@dsh-external/dsh-chat-content-visibility-auto": "file:<插件源码绝对路径>"
#    dsh.profile.bundles 加 "@dsh-external/dsh-chat-content-visibility-auto"

验证效果

1. 打开一个很长的会话（几百条消息），滚动到底/中部，应明显顺滑；
2. DevTools → Elements：选中一个视口外的聊天节点，其样式面板中 content-visibility: auto 生效，浏览器不会为它执行布局/绘制；
3. DevTools → Performance 录制滚动操作，长帧（long task）明显减少。

卸载

dsh plugin --profile web remove @dsh-external/dsh-chat-content-visibility-auto
# 重启 dsh web

局限

• 不是真正的窗口化：DOM 节点数量不变（内存占用不降），只是跳过渲染成本
• 聊天节点的弹出层若溢出节点边界会被 paint 裁剪（当前 DSH 节点内弹出层均内联且自带 overflow:hidden，无影响）

License

MIT