Enhancing Browser Performance: Extensions to Prevent ChatGPT Crashes During Extended Conversations

Long-form interactions with ChatGPT can sometimes lead to browser sluggishness or even crashes—especially in Chrome—due to the sheer volume of message data and the dynamic updates occurring during lengthy chats. To address these issues, I explored practical strategies and developed Chrome extensions aimed at optimizing the chat interface, ensuring a smoother experience even during extensive discussions.

In this article, I’ll outline the key techniques, backed by insights from leveraging ChatGPT itself, to improve performance by reducing DOM complexity and mitigating rendering bottlenecks.

Understanding the Performance Bottleneck

ChatGPT structures conversations within the DOM by encapsulating each message inside <article> elements:

“`html

“`

Over numerous exchanges, this results in thousands of such nodes. React’s reconciliation process attempts to manage all these elements, which can cause notable slowdowns, especially as new messages are appended in real-time.

**Solution 1: Pruning Old Messages to Manage DOM Size**

One effective method involves limiting the number of messages retained in the DOM:

– **Keep only the most recent N messages** (e.g., the last 20).
– **Remove older `

` nodes** from the DOM entirely—these can be stored temporarily if needed.
– **Add a placeholder interface element**, such as a button labeled “Show 20 older messages,” allowing users to load more conversation history on demand.

**Implementation outline:**

– Use CSS selectors like `’article[data-testid^=”conversation-turn-“]’` to identify message elements.
– When the message count exceeds the threshold, delete the oldest nodes.
– Upon user interaction with the placeholder button, dynamically load or reinstate earlier messages into the DOM.

**Performance benefit:**
By removing surplus DOM nodes (rather than hiding them), the browser’s rendering engine reduces repaint and layout calculations, significantly decreasing the chance of freezing during long chats and improving overall responsiveness.

—

**Solution 2: Smoothing Streaming Updates and Preventing Unwanted Scroll Movements**

While ChatGPT types responses, the rapid DOM changes can cause performance issues, including:

– Layout thrashing
– Excessive paint operations
– Unexpected scroll jumps

To counter this, several techniques can be employed:

### A. Detect Streaming Activity

Identify when ChatGPT is actively streaming a message by checking for the presence of a `[data-writing-block]` attribute within the latest `

`:

“`js

Leave a Reply

Your email address will not be published. Required fields are marked *