Я пытаюсь создать простую HTML-страницу плана этажа, содержащую несколько геометрических элементов (прямоугольники, круги) в различных преобразованиях и, в основном, множество небольших текстовых меток.
Я протестировал несколько подходов к этому:
- Наличие всего в одном SVG, который пользователь может перемещать, увеличивать и уменьшать. Это работает нормально, но анимация зума довольно вялая и имеет значительную задержку. Глядя на профилировщик, в этом потраченном времени доминирует «Макет»
- То же, что и 1, один SVG, но заменяет множество элементов
<text> изображениями, которые создаются при инициализации путем рендеринга в невидимый холст и использования toDataURL(). Это сделало анимацию масштабирования очень быстрой, но теперь время инициализации страницы увеличилось в 10 раз с 500 мс до 5 секунд.
- То же, что 2, но генерировать изображения в автономном режиме на сервере. Это уменьшило время инициализации, но увеличило пропускную способность и общее время загрузки на мобильном устройстве с пятнистой сетью (где это будет использоваться) по-прежнему порядка нескольких секунд.
Нет ли способа выиграть это? То, что я ищу, - это какое-то решение, которое будет иметь низкое время загрузки 1. (500 мс) и возможность масштабирования 2.