diff --git a/_blueprint/plan-draft.md b/_blueprint/plan-draft.md index e96d7bb..c1b7597 100644 --- a/_blueprint/plan-draft.md +++ b/_blueprint/plan-draft.md @@ -311,6 +311,16 @@ pixels = image.quantize(colors=256) # или custom median-cut - Пагинация: 24 карточки на странице - `GET /gallery/{hash}` — полноэкранный просмотр SVG с кнопками "Скачать" и "Поделиться" +#### ВАЖНО: Оптимизация производительности рендеринга галереи (SVG-превью) +- **Проблема:** Десятки карточек с тысячами анимированных SVG-элементов могут перегрузить браузер клиента (CPU/GPU при одновременной перерисовке). +- **Решение для витрины галереи:** + - Карточки галереи выводятся через тег `` (изолированный контекст рендеринга). + - Для предотвращения постоянного пожирания ресурсов анимация в SVG по умолчанию спит (`animation-play-state: paused`) и оживает только при наведении (`:hover { animation-play-state: running; }`). + - Дополнительно на контейнерах карточек используется CSS-свойство `content-visibility: auto` для отключения рендера невидимых вне экрана карточек. +- **Выдача пользователю («Копировать» и «Скачать»):** + - Пользователю всегда отдается «чистый» полнофункциональный SVG со стандартно запущенной анимацией (без ограничений `animation-play-state: paused`). + - На бэкенде/сервисе при сохранении для галереи модификатор паузы/ховера может вшиваться по умолчанию либо подставляться/вырезаться на лету при выдаче пользователю. + **CSS:** - Dev: Tailwind CDN (``) + Purge content в конфиге - Prod: `collectstatic` → `whitenoise` обслуживает скомпилированную статику