前言¶
做 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
