dsh-scroll-boost:DSH Web 界面滚动性能客户端加速

前言

DeepSeek Harness(DSH)把能力拆成插件后,聊天页 DOM 会随会话变长。再叠上 @changfenhuang/dsh-genui 等会在页面里生成大量围栏内容的插件,滚动时浏览器仍要对整页做布局与绘制,而一帧预算大约只有 16.7ms,长会话里就容易掉帧。换主题、卸插件、改 React 组件都不是必选项——若目标只是「滚动更顺、画面不变」,可以单独装一个只跑在浏览器里的优化插件。下面介绍维护者 TWFU-wcy 发布的 dsh-scroll-boost(当前版本 0.6.0,MIT 许可证):纯客户端、不卸载其他插件、不改组件与主题,用 CSS 与空闲时分片扫描减轻离屏内容的布局压力。

这是什么

dsh-scroll-boost 是 DSH 生态里的客户端插件(package.json 中 dsh.client.platform 为 web,兼容 web 与 desktop profile)。它在空闲时给「真正可滚动容器里的长列表直接子行」等目标加上 content-visibility: auto,让浏览器跳过屏幕外行的布局与绘制;对 DSH 自带的聊天流、轨迹表、长思考正文与 PTC 过程组则按 README 里描述的 data-* 表面分别处理。屏幕内的像素与未安装时对齐是设计目标——README 在轨迹表、块级跳过等场景用截图 diff 做过核对;B 层给滚动口加的 will-change: scroll-position 可能改变文字抗锯齿,与跳过层无关,若更在意逐像素一致可按 README 说明调整。

插件通过 Cordis patch 与 lib/client.js 注入;host 端入口为空实现。安装后以当前 DSH 进程权限在页面里运行,安装前应自行查看 GitHub 仓库 源码与许可证。社区目录 SkillHub 条目 与 GitHub 无 DeepSeek / 幻方官方从属关系,DSH 本身也是「一切皆插件」的开放形态。

核心功能

认 DSH 界面,而不是猜列表

0.3.0 起插件直接识别 DSH 的稳定表面,而不是在页面里「找一个可滚动容器再把子节点当行」。原因是聊天记录落在 display: contents 的槽位里,旧 heuristic 基本碰不到长会话聊天页。README 中的对应关系如下:

表面 选择器 策略
聊天流 [data-slot="conversation.chat.flow"] 标记直接子行
会话滚动口 [data-conversation-scroll] 合成层提示(will-change)
轨迹表 [data-trajectory-scroll] 静态 CSS 规则,只跳内容单元格
摘要区 [data-summary-scroll-region] 仅提示,短列表不跳行

认不出的界面仍走 0.2.x 通用回退,升级后不会整站失效。

分层优化(A–H)

README 把能力收成八层,便于理解分工:

  1. A 离屏行跳过:content-visibility: auto + 真实行高写入占位(--sb-h / inline 钉高),可见区域不变。
  2. B 容器提示:最多 8 个大滚动容器加 will-change: scroll-position。
  3. C 空闲调度:requestIdleCallback 分片扫描,滚动中暂停,结束后再补。
  4. D 增量维护:MutationObserver + 50ms 去抖,新消息只补新行。
  5. E 首屏快扫:挂载后下一帧标记视口上下约 1.5 屏内的行(上限 120 行),其余交给空闲分片。
  6. F 块级跳过(0.5.0+):长思考正文根 [data-markdown-variant="compact"] 上,对超过 1.5 屏且块够多的直接块子元素打标记;须先量真实高度再钉,流式期间不动。
  7. G 步级跳过(0.6.0):PTC 过程组认 [data-step-process-content][data-chat-flow],按 step 跳过,而不是 step 内几十个段落。
  8. H 流式 containment(0.6.0):正文仍在 [data-state="running"] 或存在流式祖先时,只在正文根加 contain: layout,不打离屏跳过标记;落定后再走 F / G。

轨迹表因 DSH 滚动时每帧 tbody.replaceChildren 重建行,JS 写的属性下一帧就丢,0.4.0 改用随样式表生效的静态规则(README 给出完整选择器),避免与虚拟化打架。

行高与护栏

DSH 用 getBoundingClientRect() 做行定位;占位高度不准会导致跳转错位。插件对离屏行复用按 data-chat-flow-key 缓存的高度,可见带实测并写回;展开 / 折叠后只重测受影响的那一行。动画中、已虚拟化表面、hidden、流式正文等会在 report().skipReasons 里说明原因而主动跳过标记。

安装与启用

安装后必须完全退出并重启 DSH(不能只刷新页面)。插件靠 package.json 的 dsh.bundle.patch 与 dsh.client 自动挂载(immediately: true)。

方式一:从 GitHub 安装

dsh plugin --profile desktop add "github:TWFU-wcy/dsh-scroll-boost"

若使用 web profile,将 --profile desktop 换成你实际使用的 profile 名称(插件声明兼容 web 与 desktop)。

方式三:本地 tgz(与 README 版本号一致)

npm pack
dsh plugin --profile desktop add ".\dsh-scroll-boost-0.6.0.tgz"

也可从 Releases 下载对应包;最新标签为 v0.6.0。

安装后确认

重启后打开较长会话,在开发者工具 Console 执行:

window.__scrollBoost.report()

若 window.__scrollBoost 为 undefined,先确认已完全重启 DSH。空会话或很短列表时 rows 为 0 属正常。正常输出应包含 version: "0.6.0"、surfaces 数组,以及展开长思考或 PTC 后的 chunks / chunkRoots 等字段;surfaces 可用来判断当前认出了哪些 DSH 表面。

典型用法

插件默认启用,无单独配置文件。日常无需操作;需要对比或排查时在 Console 使用 README 提供的 API:

window.__scrollBoost.report();   // 查看统计
window.__scrollBoost.disable();  // 立即移除所有标记与样式
window.__scrollBoost.enable();   // 重新启用
window.__scrollBoost.scanNow();  // 手动触发一次空闲扫描
window.__scrollBoost.destroy();  // 卸载当前实例

卸载插件:

dsh plugin --profile desktop remove dsh-scroll-boost

或先 window.__scrollBoost.destroy(),再移除插件并重启。

中文界面下插件列表标题来自 locale/zh.json(显示为「滚动加速」);改 locale 后同样需要完全重启 DSH 才会重新读取。

适用场景与注意

适合谁:长会话聊天、展开长思考或 PTC 过程、轨迹表大量行且滚动掉帧,又希望保留 genui 等插件与现有主题的用户。README 强调它主要削减浏览器布局 / 绘制成本,不能消除 React 重渲染或 genui 全文档扫描等瓶颈。

务必知晓:

  • 插件以安装它的 DSH 进程权限在客户端执行,安装前请审阅源码与 MIT 许可证。
  • 流式思考正文滚动时只有 contain: layout 的收益,离屏块 / 步跳过要等内容落定;这是 README 实测后的取舍(流式期间逐块 content-visibility 反而更慢)。
  • 依赖 DSH 内部 data-* 结构;大版本改版后可能需等插件更新,但仍有通用回退;用 report().surfaces 观察识别情况。
  • 首屏「整页标记完」仍依赖空闲分片,首屏快扫只覆盖近端行;不是首屏变慢,而是离屏行会稍后补齐。
  • 不减少 DOM 节点数,也不缩短首包加载;内存与加载时间与未装时同级。
  • README 列出 Ctrl+F、屏幕阅读器、display: table-* 等特殊布局边界;遇到问题可先 disable() 对比。

验收时 README 建议在同一会话、同一滚动位置做 A/B:例如滚动 p95 帧耗时、Long Task、CLS、同位置截图 diff、scrollHeight 与行定位是否稳定。

结尾

dsh-scroll-boost 把 DSH Web GUI 的滚动优化收在纯客户端:认聊天流与轨迹等表面、离屏跳过、空闲扫描与首屏快扫、思考正文块级与 PTC 步级跳过,流式阶段用 layout containment 减轻整页重排。不卸插件、不改画面逻辑的前提下,给长会话和重 DOM 插件场景多一条可验证的路径。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye