Как мы ускорили загрузку чатов в веб-версии

Скорость — то, ради чего многие и открывают телеграм именно в браузере. Тяжёлый веб-клиент теряет весь смысл, поэтому производительность мы держим в приоритете. Рассказываем, что конкретно сделали, чтобы чаты открывались почти мгновенно.

Сначала — то, что видно

Раньше клиент пытался подготовить сразу всё. Мы поменяли порядок: первым делом рисуется то, что реально попадает на экран, а списки сообщений, аватары и вложения за пределами вьюпорта подгружаются в фоне. Пользователь видит переписку, пока остальное ещё едет по сети.

Кеш вместо повторных запросов

Часто используемые данные теперь оседают в локальном кеше, и повторный заход в чат не порождает новую пачку сетевых запросов. Ключевой приём — дедупликация одновременных обращений за одними и теми же данными:

const cache = new Map<string, Promise<Data>>();
 
function getData(key: string) {
  if(!cache.has(key)) {
    cache.set(key, fetchData(key));
  }
  return cache.get(key)!;
}

Пока запрос в полёте, все, кому нужен тот же ключ, ждут один общий промис вместо того, чтобы дублировать нагрузку.

Почему это важно на слабой сети

Меньше запросов и умный порядок рендера особенно заметны там, где соединение нестабильно, — например, при работе через MTProto-прокси для обхода блокировок. Экономия каждого round-trip напрямую превращается в скорость открытия чата.

Итог

Совокупно эти изменения ускорили открытие чатов в несколько раз. Мы продолжаем профилировать узкие места и делимся результатами в блоге.