Оптимизация фронтенда AI-чатов: как исправить лаги в ChatGPT своими руками (перехват API)

Почему ваш ChatGPT еле ползает после 300 сообщений

Вы открываете старый диалог, а интерфейс реагирует с задержкой в полсекунды. Прокрутка дергается, кнопки "падают", новые сообщения появляются рывками. Серверы OpenAI тут ни при чем - это ваш браузер захлебывается тысячами DOM-нод. К марту 2026 года проблема никуда не делась, несмотря на все обновления GPT-4.5 Turbo и якобы оптимизированный интерфейс.

Корень зла: mapping и его монструозные дети

Загляните в инструменты разработчика на сайте chat.openai.com. Найдите объект `__NEXT_DATA__`. Там живет `mapping` - гигантский JSON, где каждый ключ это ID сообщения, а значение - вся метаинформация: содержание, родительские связи, метаданные. При 500 сообщениях этот объект весит 10-15 МБ. React пытается отслеживать изменения в этой горе данных, а браузер рендерит тысячи вложенных div'ов.

Каждое новое сообщение - не просто текст. Это React-компонент с десятками элементов: аватар, кнопки действий, меню, блоки кода с подсветкой синтаксиса, интерактивные элементы. DOM-дерево растет как раковая опухоль.

1 Перехватываем fetch: хирургия на живом организме

OpenAI не дает API для управления историей внутри одного диалога. Поэтому мы пойдем в обход. Каждый раз, когда вы отправляете сообщение, фронтенд делает fetch-запрос к `/api/conversation`. В теле запроса - вся история диалога. Наша задача: перехватить этот запрос, вырезать старые сообщения, оставить только свежие 50-100.

// Content script для расширения браузера
const originalFetch = window.fetch;
window.fetch = async function(...args) {
  const [resource, config] = args;
  
  // Перехватываем только запросы к conversation API
  if (typeof resource === 'string' && resource.includes('/api/conversation')) {
    try {
      const body = JSON.parse(config.body);
      
      // Объект mapping содержит всю историю
      if (body.mapping && Object.keys(body.mapping).length > 100) {
        const allIds = Object.keys(body.mapping);
        const recentIds = allIds.slice(-80); // Оставляем 80 последних сообщений
        
        const newMapping = {};
        recentIds.forEach(id => {
          newMapping[id] = body.mapping[id];
        });
        
        // Обновляем parent_message_id для самого нового сообщения
        const lastId = recentIds[recentIds.length - 1];
        body.parent_message_id = lastId;
        
        body.mapping = newMapping;
        config.body = JSON.stringify(body);
      }
    } catch (e) {
      console.warn('Ошибка при обработке fetch:', e);
    }
  }
  
  return originalFetch.apply(this, [resource, config]);
};

Этот код нужно вставить в content script расширения браузера (Chrome, Firefox, Edge). Он работает как прокси: пропускает запросы, но обрезает историю перед отправкой на сервер. Фронтенд получит ответ только для усеченной истории, и React будет рендерить меньше компонентов.

2 Добиваем DOM: виртуализация списка сообщений

Перехват API уменьшает нагрузку на React, но старые DOM-элементы уже есть на странице. Нужно физически удалить их из документа. Прямое удаление через `document.querySelectorAll()` сломает состояние React. Поэтому действуем точечно.

Найдите главный контейнер сообщений. В текущем интерфейсе ChatGPT (март 2026) это обычно div с классом, содержащим "ConversationList" или "MessageList". Удаляем все дочерние элементы, кроме последних 50.

// Функция для очистки DOM
function cleanupOldMessages() {
  // Селектор может меняться после обновлений интерфейса
  const selectors = [
    '[data-testid="conversation-list"]',
    'div[class*="ConversationList"]',
    'div[class*="MessageList"]',
    'main > div > div > div > div > div' // Глубокая вложенность типична для React-приложений
  ];
  
  let container = null;
  for (const selector of selectors) {
    container = document.querySelector(selector);
    if (container) break;
  }
  
  if (!container) {
    console.log('Контейнер сообщений не найден, возможно, изменилась структура DOM');
    return;
  }
  
  const messages = container.children;
  if (messages.length > 60) {
    const toRemove = messages.length - 50;
    for (let i = 0; i < toRemove; i++) {
      if (messages[0]) {
        messages[0].remove();
      }
    }
    console.log(`Удалено ${toRemove} старых сообщений из DOM`);
  }
}

// Запускаем при загрузке и при добавлении новых сообщений
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length > 0) {
      setTimeout(cleanupOldMessages, 500);
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

А альтернативы? Есть, но они не решают проблему

Можно попробовать готовые расширения в магазинах браузеров. Большинство из них делают примерно то же самое, но с закрытым кодом и сомнительными разрешениями. Некоторые требуют деньги за "премиум-функции", которые сводятся к двум сотням строк JavaScript.

Еще один путь - использовать API напрямую через прокси-сервисы вроде AITUNNEL, который предоставляет стабильный доступ к разным нейросетям. Но это не решит проблему с фронтендом - вы просто будете общаться с моделью через другой интерфейс, который, возможно, лучше оптимизирован.

Кому стоит этим заниматься, а кто зря потратит время

Этот метод - для тех, кто ежедневно работает с длинными диалогами в ChatGPT. Для разработчиков, которые используют его для дебаггинга кода. Для исследователей, ведущих долгие дискуссии с моделью. Если у вас диалог редко превышает 50 сообщений - не усложняйте себе жизнь.

Нужно быть готовым к тому, что после каждого крупного обновления интерфейса ChatGPT придется обновлять селекторы DOM и паттерны перехвата запросов. OpenAI постоянно меняет внутреннюю структуру, и скрипт может сломаться.

Если же вы предпочитаете готовые решения, изучите скрытые функции ChatGPT - возможно, там есть встроенные оптимизации, о которых мы не знаем. Или настройте темперамент модели, чтобы получать более сжатые ответы и замедлять рост диалога.

Главное - не ждите, что OpenAI решит эту проблему за вас. Их приоритеты - новые функции, интеграции, монетизация. Производительность фронтенда для 0.5% пользователей с гигантскими диалогами - в конце списка.

Подписаться на канал