前言¶
做 DSH Web 客户端时，一个常见诉求是降低长会话聊天列表的渲染成本。hongweifei/dsh-chat-content-visibility-auto 是一个 DSH 插件，用于为会话消息节点启用浏览器原生 content-visibility: auto，跳过屏外消息节点的渲染、布局与绘制。
下面介绍它的定位、安装方式、验证方法和注意事项。
插件定位¶
- 名称：
hongweifei/dsh-chat-content-visibility-auto - 维护者：
hongweifei - 许可证：MIT
- 用途：DSH 聊天列表性能优化
- 方式：为会话消息节点启用
content-visibility: auto，并通过contain-intrinsic-size: auto 320px提供尺寸估算
一句话概括：这是一个面向 DSH 聊天列表的纯 CSS 样式叠加插件，用来减少屏外消息节点的渲染、布局和绘制成本。
核心能力¶
该插件会启用类似下面的样式能力：
content-visibility: auto;
contain-intrinsic-size: auto 320px;
其中：
content-visibility: auto：让浏览器跳过屏外节点的渲染、布局与绘制contain-intrinsic-size: auto 320px：为未渲染节点提供尺寸估算，用于稳定滚动条位置和滚动锚定
已核实资料说明，该插件是纯 CSS 样式叠加，不替换任何槽位，不修改 DOM 结构。
浏览器兼容性方面，资料标注：
- Chrome 85+
- Firefox 125+
- Safari 18+
如果浏览器不支持该属性，规则会被忽略。
安装与启用¶
先做官方安装：
dsh plugin --profile web add "github:hongweifei/dsh-chat-content-visibility-auto"
再做启动和刷新：
- 重启
dsh web - 在浏览器中硬刷新：
Ctrl+F5
如果 GitHub 不可达，可以按下面方式手动安装。
- 在 Web profile 的
node_modules下创建指向插件源码的 Junction：
New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\@dsh-external\dsh-chat-content-visibility-auto" -Target "<插件源码绝对路径>"
- 在
profiles/web/package.json的dependencies中添加：
"@dsh-external/dsh-chat-content-visibility-auto": "file:<插件源码绝对路径>"
- 在
dsh.profile.bundles中添加：
"@dsh-external/dsh-chat-content-visibility-auto"
- 重启
dsh web，并在浏览器中硬刷新：Ctrl+F5
验证效果¶
经过上面的安装步骤后，可以做这些验证：
- 打开一个很长的会话，并上下滚动
- 在 DevTools 的 Elements 中选中一个视口外聊天节点，确认
content-visibility: auto生效 - 在 DevTools 的 Performance 中录制滚动操作，观察 long task 是否减少
适用场景与注意¶
适合：
- 希望在不改变 DOM 结构的前提下，降低 DSH 聊天列表屏外消息节点渲染成本
- 主要在 Web 客户端场景下使用
- 希望使用浏览器原生能力，而不是替换产品逻辑
注意：
- 这不是真正的窗口化：DOM 节点数量不变，内存占用不降，只是跳过渲染成本
- 聊天节点的弹出层若溢出节点边界，会被 paint 裁剪；资料说明当前 DSH 节点内弹出层均内联且自带
overflow:hidden，因此无影响 - 插件以当前
dsh进程权限运行，安装前建议检查 GitHub 源码和 MIT 许可证 - 安装或卸载后都需要重启
dsh web；安装后还需要硬刷新浏览器
卸载¶
运行：
dsh plugin --profile web remove @dsh-external/dsh-chat-content-visibility-auto
然后重启 dsh web。
链接¶
- GitHub：https://github.com/hongweifei/dsh-chat-content-visibility-auto
- 目录页：已核实资料未提供可验证 URL，可在 DSH 插件目录中检索
dsh-chat-content-visibility-auto
