ChatGPT Web Accelerator (ChatGPT 网页版加速器)

English | 中文

---

中文

📖 项目简介

ChatGPT Web Accelerator 是一款专为优化 ChatGPT 网页版（chatgpt.com / chat.openai.com）长对话性能而设计的 Chrome / Edge 浏览器插件（Manifest V3）。

当单会话对话极长、或包含大量复杂的 Markdown 渲染、KaTeX 数学公式、SVG 图表和代码高亮时，浏览器因为需要维护巨大的 DOM 渲染树会导致打字延迟、页面滚动严重卡顿。本插件使用 DOM 虚拟化渲染技术，在不破坏 React 虚拟 DOM 的前提下，跳过屏幕外消息的重绘与重排，从而使长对话体验如丝般顺滑。

⚡ 核心原理

1. React 安全兼容：不物理删除 DOM 节点（否则会导致 React 底层运行时崩溃），而是通过 CSS 属性 content-visibility: hidden 阻断屏幕外子节点的布局与绘制。
2. 防滚动条抖动：在元素出屏隐藏前，通过 JS 精确测量其当前高度，并动态应用 contain-intrinsic-size: auto <height>px 进行弹性占位，消除滚动条跳跃。
3. 低负荷统计：使用基于 WeakMap 的 DOM 节点计数缓存，在不带来额外 CPU 负荷的情况下，实时统计并汇报被优化的节点数量及内存节省空间。

🎨 功能特性

• 主加速开关：随时启用或停用加速器。
• 三档优化模式：
  • 智能 JS 虚拟化 (推荐)：使用 IntersectionObserver 监控出屏元素并自动锁高隐藏，极其平滑。
  • 极简 CSS 优化：使用原生的 content-visibility: auto，零 JS 执行开销。
  • 极限 DOM 卸载：当消息距离视口极远时，将子元素设为 display: none，最大程度释放渲染内存。
• 自定义缓冲区：可在 0.5x 到 5.0x 视口高度之间调整预渲染范围。
• 调试可视化器：在页面上用绿色 (活动中) 和红色虚线 (已虚拟化) 直观标记消息状态，方便性能对比。
• 自定义选择器：支持自定义 DOM 选择器以应对未来官方网页改版。
• 高科技感 UI：采用现代毛玻璃拟态（Glassmorphism）和霓虹绿配色，操作体验极佳。

🛠️ 安装方法

1. 下载本项目或克隆到本地。
2. 打开 Chrome 或 Edge 浏览器，访问 chrome://extensions/（或 edge://extensions/）。
3. 勾选右上角的 “开发者模式” (Developer Mode)。
4. 点击左上角的 “加载已解压的扩展程序” (Load unpacked)。
5. 选中本项目所在的文件夹目录即可完成安装。
6. 进入 ChatGPT 页面，刷新网页即可开始享受流畅加速。

---

English

📖 Introduction

ChatGPT Web Accelerator is a lightweight, high-performance browser extension (Manifest V3) designed to optimize page rendering on ChatGPT (chatgpt.com / chat.openai.com) during extremely long conversations.

As a chat history grows, rendering complex elements like Markdown, code blocks with syntax highlighting, and KaTeX mathematical formulas creates a massive DOM tree. This leads to input lag, sluggish scrolling, and browser freezing. This extension uses DOM Virtualization to skip layouts and paints for offscreen elements without detaching them, keeping React's Virtual DOM intact while regaining buttery-smooth scrolling.

⚡ How It Works

1. React-Safe Hide: Instead of physically removing DOM nodes (which crashes React's renderer during state updates), we apply content-visibility: hidden to block the browser from layout calculations and painting of off-screen elements.
2. Prevent Layout Shift: We measure the exact height of the message container right before it scrolls out of view and set contain-intrinsic-size: auto <height>px. This preserves the container's height and prevents the scrollbar from jumping.
3. Cached Statistics: We use a WeakMap cache to count child DOM nodes, computing CPU/RAM savings dynamically in real-time with near-zero overhead.

🎨 Key Features

• Global Master Switch: Toggle optimization instantly.
• Three Optimization Modes:
  • Smart JS Virtualization (Recommended): Utilizes IntersectionObserver to measure heights dynamically and lock containers. Most stable.
  • Pure CSS Optimization: Applies native browser content-visibility: auto for zero-JS runtime overhead.
  • DOM Unload: Sets child components to display: none when far off-screen, recouping maximum rendering memory.
• Adjustable Viewport Buffer: Set custom buffers from 0.5x to 5.0x viewports.
• Visual Debug Mode: Visualizes active (green) and virtualized (red dashed border) chat nodes on the webpage.
• Dynamic Selectors: Change target classes or tags directly from the popup if OpenAI updates the frontend structure.
• Futuristic UI: Gorgeous Glassmorphism layout with smooth CSS micro-animations.

🛠️ Installation

1. Clone or download this repository to your local machine.
2. Navigate to chrome://extensions/ (or edge://extensions/ in Microsoft Edge).
3. Toggle the "Developer mode" switch in the top-right corner.
4. Click the "Load unpacked" button in the top-left.
5. Select the project folder.
6. Open or reload ChatGPT to apply optimization.

---

📄 License / 开源协议

This project is licensed under the MIT License. Details can be found in the LICENSE file.