Introduction

When developing the DSH Web client, a common requirement is to reduce the rendering cost of long-session chat lists. hongweifei/dsh-chat-content-visibility-auto is a DSH plugin used to enable the browser native content-visibility: auto for session message nodes, skipping rendering, layout, and painting for off-screen message nodes.

Below is an introduction to its positioning, installation method, verification method, and precautions.

Plugin Positioning

  • Name: hongweifei/dsh-chat-content-visibility-auto
  • Maintainer: hongweifei
  • License: MIT
  • Purpose: DSH Chat List Performance Optimization
  • Method: Enables content-visibility: auto for session message nodes and provides size estimation via contain-intrinsic-size: auto 320px

In short: This is a pure CSS style overlay plugin for the DSH chat list, designed to reduce the rendering, layout, and painting costs of off-screen message nodes.

Core Capabilities

This plugin enables style capabilities similar to the following:

content-visibility: auto;
contain-intrinsic-size: auto 320px;

Where:

  • content-visibility: auto: Allows the browser to skip rendering, layout, and painting for off-screen nodes.
  • contain-intrinsic-size: auto 320px: Provides a size estimation for unrendered nodes, used to stabilize the scrollbar position and scrolling anchoring.

Verified sources indicate that this plugin is a pure CSS style overlay, does not replace any slots, and does not modify the DOM structure.

Regarding browser compatibility, sources indicate:

  • Chrome 85+
  • Firefox 125+
  • Safari 18+

If the browser does not support this property, the rule will be ignored.

Installation and Enablement

First, perform the official installation:

dsh plugin --profile web add "github:hongweifei/dsh-chat-content-visibility-auto"

Then, perform the startup and refresh:

  1. Restart dsh web
  2. Hard refresh in the browser: Ctrl+F5

If GitHub is unreachable, you can install manually as follows.

  1. Create a Junction in node_modules under the Web profile pointing to the plugin source code:
New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\@dsh-external\dsh-chat-content-visibility-auto" -Target "<插件源码绝对路径>"
  1. Add to dependencies in profiles/web/package.json:
"@dsh-external/dsh-chat-content-visibility-auto": "file:<插件源码绝对路径>"
  1. Add to dsh.profile.bundles:
"@dsh-external/dsh-chat-content-visibility-auto"
  1. Restart dsh web and hard refresh in the browser: Ctrl+F5

Verifying the Effect

After completing the installation steps above, you can perform these verifications:

  1. Open a long session and scroll up and down.
  2. Select an off-screen chat node in the Elements tab of DevTools and confirm content-visibility: auto is applied.
  3. Record a scrolling operation in the Performance tab of DevTools and observe if long tasks are reduced.

Suitable Scenarios and Precautions

Suitable for:

  • Want to reduce the rendering cost of off-screen message nodes in the DSH chat list without changing the DOM structure.
  • Mainly used in Web client scenarios.
  • Want to use browser native capabilities instead of replacing product logic.

Precautions:

  • This is not true virtualization: the number of DOM nodes remains the same, memory usage does not decrease, only rendering costs are skipped.
  • If a popup of a chat node overflows the node boundary, it will be clipped by paint; sources indicate that current DSH node popups are inline and have overflow:hidden, so this has no impact.
  • The plugin runs with the current dsh process permissions; it is recommended to check the GitHub source code and MIT license before installation.
  • Both installation and uninstallation require restarting dsh web; after installation, a hard browser refresh is also required.

Uninstall

Run:

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

Then restart dsh web.

Links