Ivan Fontosh
8f8eef53c9
- Optimize imported scene preview images (smart WebP/JPEG/PNG, preserve alpha, keep pixel size) - Update converter to re-encode existing image assets with same algorithm - Improve import/export progress overlay and reduce presentation slide stutter Made-with: Cursor
5.5 KiB
5.5 KiB
План оптимизации редактора (агент)
Цель: убрать лаги визуального редактора на проектах 20+ сцен (пан/зум графа, drag, создание связей) и снизить влияние тяжёлых ассетов (изображения/видео) на редактор.
Этап 0 — Замер и воспроизведение
- Сценарии: пан/зум графа, drag узлов, создание/удаление связей, работа со списком сцен, редактирование свойств сцены.
- Сбор данных: DevTools Performance (CPU/Rendering), наблюдение нагрузки (GPU/Video Decode), фиксация “где именно тормозит”.
Результат: подтверждены основные “горячие места” (граф/рендер/медиа/IPC).
Этап 1 — Быстрый выигрыш без изменения формата проекта (минимально и безопасно)
1.1 Lazy/async для изображений в карточках
- Для
<img>в карточках графа и списка сцен применить:loading="lazy"decoding="async"
- Убедиться, что контейнеры превью не провоцируют лишние перерасчёты размеров/перерисовки.
1.2 Снижение перерисовок графа (минимально и безопасно)
- Стабилизировать входные данные графа:
- вместо передачи “всего
project.scenes” подготовить “лёгкое” представление сцен, содержащее только поля, нужные для карточек (title, preview refs, флаги).
- вместо передачи “всего
- Цель: изменения в инспекторе (описание/аудио/и т.п.) не должны заставлять ReactFlow пересобирать все
nodes/edges.
1.3 Ограничить частоту тяжёлых обновлений при действиях в графе
- Проверить, чтобы обновления позиций/связей не вызывали лишних “полных” пересборок и не инициировали дорогие операции чаще, чем нужно.
Критерий готовности: на проекте с 22 сценами взаимодействие с графом заметно плавнее, задержка при создании связей снижается.
Этап 2 — Самое эффективное: thumbnails вместо оригиналов
2.1 Модель данных для миниатюр
- Для превью/медиа хранить:
- original asset (как сейчас) — для просмотра/презентации
- thumbnail asset — для графа и списков
- Миниатюра — отдельный asset в
project.assets, связанный с оригиналом (через поле в сцене или метаданные asset).
2.2 Генерация thumbnail при импорте изображений
- При импорте превью/изображений:
- ресайз до ~320px по длинной стороне
- кодек: WebP (или JPEG)
- Сохранять thumbnail как отдельный файл/asset.
2.3 Генерация thumbnail для видео по первому кадру
- При импорте видео:
- извлечь кадр (0.5–1s если на 0s чёрный)
- сохранить как image/webp/jpeg thumbnail
- В UI использовать thumbnail как постер для карточек.
2.4 Использование thumbnails в UI
- Граф сцен: показывает только thumbnail.
- Список сцен: показывает только thumbnail.
- Инспектор: по желанию — только thumbnail.
- Презентация/просмотр: оригинал.
2.5 Обратная совместимость
- Старые проекты без thumbnails:
- “ленивая” догенерация в фоне при первом отображении,
- или отдельная команда “Оптимизировать проект (создать миниатюры)”.
Критерий готовности: тяжёлые исходники почти не влияют на редактор; масштабируемость по сценам растёт.
Этап 3 — Дополнительные ускорения (по ситуации)
- 3.1 Виртуализация списка сцен (если список остаётся тяжёлым при 50+ сценах).
- 3.2 Дифф‑обновление
nodes/edgesв ReactFlow вместо “пересборки целиком” (для 100+ сцен). - 3.3 LOD‑поведение: при сильном зуме карточки упрощаются (только заголовок/иконки), thumbnails отключаются.
Приоритизация
- Сразу: Этап 1.
- Максимальный эффект: Этап 2.
- Для больших проектов: Этап 3.