Skip to content

Chat panel should virtualize DOM for long conversations (performance degrades over time) #297349

@markkennethbadilla

Description

@markkennethbadilla

Description

During extended chat sessions with Copilot (or any chat participant), the VS Code UI becomes progressively slower — clicks, scrolling, resizing, and typing all develop noticeable lag. This correlates directly with conversation length.

Root Cause Analysis

The chat panel webview keeps all messages in the DOM regardless of how many there are. After a long session with hundreds of messages (each containing code blocks, tool call outputs, markdown rendering, etc.), the DOM grows to tens of thousands of nodes. This causes:

  1. Layout/reflow bottleneck — every new message triggers layout recalculation across the entire DOM
  2. Repaint overhead — scrolling repaints large composited layers
  3. Memory growth — the renderer process grows to 1.5-2+ GB over a long session

The pattern is well-understood in web development. The VS Code editor handles this correctly via line virtualization (only visible lines are in the DOM, enabling million-line files). The chat panel does not apply the same pattern.

Expected Behavior

The chat panel should:

  • Virtualize the message list — only render messages visible in the viewport (plus a small buffer above/below for smooth scrolling)
  • Lazy-load old messages — messages scrolled far out of view should be removed from the DOM and reconstructed on-demand
  • Cap DOM complexity — consider collapsing or summarizing very old messages (e.g., tool call outputs beyond a certain age could be collapsed by default)

Reproduction Steps

  1. Open VS Code with Copilot Chat
  2. Have a long conversation (100+ messages with code blocks and tool calls)
  3. Observe progressive UI degradation:
    • Click response delay increases
    • Window resizing becomes stuttery
    • Typing in the chat input has visible latency
    • Scrolling within the chat panel is not smooth
  4. Open Task Manager: the renderer process (--type=renderer) will show 1-2+ GB memory

System Info

  • VS Code: 1.99+
  • OS: Windows 11
  • RAM: 16 GB
  • Extensions: Minimal (3 extensions, Copilot Chat is the primary one)
  • Settings: Fully optimized (minimap off, animations off, smooth scroll off, etc.)

Impact

This primarily affects users who rely on long agent-mode sessions where ending the conversation means losing context. The longer the session, the worse the degradation becomes, eventually making VS Code nearly unusable until the conversation is cleared.

References

  • Virtual scrolling is a solved pattern: react-window, react-virtuoso, @tanstack/virtual
  • VS Code's own editor uses line virtualization for exactly this reason
  • Similar to how Slack/Discord handle long message histories with windowed rendering

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions