mod: как делать превью галереи и не "обрушить" браузер!

2026-08-16 22:55:54 +03:00
parent 60438d05bd
commit 8ed24d3291
1 changed files with 10 additions and 0 deletions
@@ -311,6 +311,16 @@ pixels = image.quantize(colors=256)  # или custom median-cut
 - Пагинация: 24 карточки на странице
 - `GET /gallery/{hash}` — полноэкранный просмотр SVG с кнопками "Скачать" и "Поделиться"
 #### ВАЖНО: Оптимизация производительности рендеринга галереи (SVG-превью)
 - **Проблема:** Десятки карточек с тысячами анимированных SVG-элементов могут перегрузить браузер клиента (CPU/GPU при одновременной перерисовке).
 - **Решение для витрины галереи:**
  - Карточки галереи выводятся через тег `<img src="..." loading="lazy">` (изолированный контекст рендеринга).
  - Для предотвращения постоянного пожирания ресурсов анимация в SVG по умолчанию спит (`animation-play-state: paused`) и оживает только при наведении (`:hover { animation-play-state: running; }`).
  - Дополнительно на контейнерах карточек используется CSS-свойство `content-visibility: auto` для отключения рендера невидимых вне экрана карточек.
 - **Выдача пользователю («Копировать» и «Скачать»):**
  - Пользователю всегда отдается «чистый» полнофункциональный SVG со стандартно запущенной анимацией (без ограничений `animation-play-state: paused`).
  - На бэкенде/сервисе при сохранении для галереи модификатор паузы/ховера может вшиваться по умолчанию либо подставляться/вырезаться на лету при выдаче пользователю.
 **CSS:**
 - Dev: Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`) + Purge content в конфиге
 - Prod: `collectstatic` → `whitenoise` обслуживает скомпилированную статику