Я создаю веб-страницу, которая использует SVG, Canvas и, конечно, HTML. Идея этой страницы состоит в том, чтобы оживить перерисовку некоторых svg-путей на холсте. Пути, которые я люблю перерисовывать, помечены атрибутом пространства имен, все остальные пути отображаются как есть. Это все работает нормально! Утечка производительности появилась в последние два часа, когда я добавлял контент на страницу.
Но сначала небольшая иллюстрация настройки страницы:
SVG и Canvas имеют ширину 4000 * 4000 пикселей и лежат прямо друг над другом в одном контейнере. Переход с одной «страницы» на другую означает анимацию верхнего левого края этого контейнера. Это также работало нормально, так как обсуждение вставки текста перешло в направлении использования контейнера html div вместо самого svg.
Поэтому я вставил третий контейнер div, в котором хранятся все тексты, и после загрузки svg они размещаются абсолютно.
С каждым делением я добавляла «анимацию движения», и даже производительность рисования снижалась до слишком низкой точки.
Я ищу способ вернуть производительность на уровень, приемлемый для пользователя. Одна из моих идей - установить отображение текстовых элементов div: нет или видимость: скрытый, если они не отображаются на самом деле. Другой вариант - анимация только svg и canvas, после того как текстовый div-контейнер будет закончен за один шаг. Но в настоящее время я не уверен, какое решение лучше, или нет ничего лучше. Так что если у кого-то есть идея, пожалуйста, дайте мне знать.
Спасибо за чтение!
Привет Филипп