@dsh-external/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：

```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+）

## 安装

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

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

### 手动安装（github 不可达时）

```powershell
# 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）明显减少。

## 卸载

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

## 局限

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

## License

MIT