Когда дело доходит до рисования сложной графики в React, React Konva действительно может помочь упростить работу непосредственно с холстом. Однако сила абстракции снижает производительность.
Для большинства людей React Konva будет работать отлично, без необходимости уделять много внимания оптимизации производительности. Но если вы когда-нибудь обнаружите, что визуализируете более нескольких сотен фигур одновременно, вам придется задуматься об оптимизации.
В этой статье будет рассмотрено несколько способов выжать дополнительную производительность из React Konva.
Сначала я рассмотрю простые «серебряные пули», которые могут повысить производительность без значительного рефакторинга.
Затем мы поговорим о сложных настройках, которые требуют более агрессивного рефакторинга.
(Эта статья была вдохновлена моим личным опытом и с помощью документации Konva - особенно эта страница с советами по оптимизации производительности в библиотеке, отличной от React. Обязательно ознакомьтесь с ней, чтобы узнать больше.)
Быстрые слои
FastLayers может быть самой быстрой настройкой производительности, если ваш пользователь не взаимодействует с графикой. Их действительно нетрудно, потому что, согласно документации Konva, они обрабатывают вдвое быстрее, чем обычные слои.
К сожалению, использование FastLayer - не лучший вариант, если вам нужно выполнить какое-либо взаимодействие с мышью на узлах в слоях.
Использовать только преобразования положения
Если в ваших фигурах не используются преобразования масштаба или поворота, вы можете получить бонус к производительности, разрешив только преобразования положения. Вы можете сделать это, просто установив transformsEnabled="position".
Отключение perfectDraw
Когда для фигуры заданы значения stroke, fill и opacity, иногда заливка и обводка перекрываются. Этот видимый артефакт выглядит как вторая граница. Konva решает эту проблему, используя буферный холст (подробнее об этом здесь), однако, как и все остальное, этот буфер действительно потребляет ресурсы.
Поэтому, если у ваших фигур есть обводка, заливка и непрозрачность, вы можете попробовать отключить perfectDraw, чтобы избежать этого снижения производительности. Если ваши формы выглядят нормально, значит, вы только что добились еще одной оптимизации - отличная работа.
Отключение прослушивания
Для каждого Layer в вашем веб-приложении Konva генерирует два средства визуализации холста - scene renderer и hitgraph renderer. scene renderer генерирует холст, который вы фактически видите, а hitgraph renderer генерирует невидимый холст, который используется для регистрации событий.
hitgraph действительно дает снижение производительности, но, к счастью, мы можем облегчить его нагрузку.
Установив listening={false}, мы можем избирательно предотвратить рендеринг формы в hitgraph и получить скромный прирост производительности. Это идеально подходит для ситуаций, когда мы не можем использовать FastLayer.
Уменьшить слои
Иногда легче сказать, чем сделать, документы Konva рекомендуют максимум 3–5 слоев для лучшей производительности.
Уменьшить размер сцены
Отдавайте предпочтение меньшей сцене, чтобы получить лучшую производительность. Опять же - в некоторых случаях легче сказать, чем сделать.
Что ж, это все простые вещи, надеюсь, эти быстрые советы помогли выжать из вашего приложения некоторую производительность. Остальные предложения требуют гораздо большего переосмысления и рефакторинга, но могут привести к действительно значительному увеличению производительности.
Не отображайте фигуры, которые пользователь не может видеть
Эта оптимизация не является явно агрессивной и действительно может повысить производительность в нужных ситуациях.
В вашем приложении много масштабирования, перемещения? Существуют ли ситуации, когда фигуры могут отображаться за пределами области, которую видит пользователь? Визуализация фигур, которые пользователь даже не может видеть, довольно расточительна, особенно если одновременно видно только небольшое количество ваших фигур. Это может потребовать немного сложной математики, но, визуализируя только формы, видимые пользователю, вы можете вернуть потерянную вычислительную мощность.
Динамическое удаление фигур из графика попаданий
Ранее мы говорили о hitgraph и о том, как облегчить его нагрузку. Давайте вернемся к этому и поразмыслим еще глубже.
Подумайте про себя, есть ли ситуации, когда вы можете ожидать, что пользователь не будет взаимодействовать с фигурой или набором фигур? Есть ли ситуации, в которых вы хотите запретить взаимодействовать пользователю-пользователю с фигурой или набором фигур? Если есть какая-либо из этих ситуаций, поздравляю, вы можете добиться дополнительной оптимизации.
Если пользователь не взаимодействует с этими фигурами, воспользуйтесь возможностью, чтобы динамически выгрузить их в FastLayer или установить listening={false}.
Оптимизация самого React
Этот совет выходит за рамки статьи, но о нем стоит упомянуть. Со всеми замечательными вещами, которые поставляются с React, есть некоторые проблемы с производительностью. Хорошая новость заключается в том, что существуют тысячи статей и сообщений в блогах, посвященных снижению этой потери производительности.
В зависимости от того, насколько хорошо оптимизировано ваше приложение, вы можете добиться значительного прироста производительности, используя такие вещи, как PureComponents, memo, Redux и т. Д. Сделайте себе одолжение и прочтите об оптимизации React. Пока вы занимаетесь этим, найдите время, чтобы оптимизировать свой собственный код.
Полное переосмысление пользовательского интерфейса
Итак, вы зашли так далеко. Ваше приложение сейчас достаточно быстро?
Если вы пришли и по-прежнему недовольны производительностью своего приложения, пора принять трудные решения.
Почему вы рисуете так много форм? Есть ли лучший способ взаимодействия пользователя с вашим приложением? Есть ли в вашем приложении еще что-то, что действительно является узким местом? Есть ли какие-то другие уловки, которые вы можете использовать, чтобы уменьшить количество фигур, которые вы рисуете за раз? Есть ли более компактная структура, подходящая для вашего случая использования?
React Konva - отличный фреймворк, который действительно может работать быстро и экономно, но это не все, что касается холстовой графики в React. Если вы постоянно боретесь с ним, чтобы он работал хорошо, то пора рассмотреть альтернативы.
Спасибо за чтение и удачи!
