Я обновляю платформу, где игроки определенной игры могут просматривать свои повторы матчей, сгенерированные на основе данных телеметрии. Повторы представлены в виде карты, где каждый игрок отмечен точкой на карте. Я использую Konva для отображения телеметрии в качестве управляемой анимации (например, видеоплеер).
Я использую React с Redux и Redux-Saga для управления состоянием.
Предыдущая версия работала просто отлично. Рендеринг l oop занял около 40 мс до финала sh.
Теперь я решил переписать весь проект, чтобы сделать его немного более организованным и более привлекательным. С тех пор производительность рендера canvas снизилась, и я предполагаю, что это из-за Redux. Сейчас у меня 21 редуктор по сравнению с 5 раньше. В обоих случаях я храню в нем данные телеметрии -> ~ 15MB json. Я включил Redux-Saga в более новую версию (не знаю, связано ли это с этим).
Вот причина, по которой я думаю, что проблема в Redux:
setNewmatchAnalyzerState - это действие Redux, которое обычно занимает 120ms до фини sh. Это действие запускается при каждом requestAnimationFrame и обновляет текущее время воспроизведения.
Для сравнения эквивалентная функция раньше занимала чуть меньше 40 мс .
Я уже оптимизировал рендер Konva. Я также попытался удалить все для рендера Konva и получил те же результаты, которые подтверждают, что рендеринг Konva не должен быть проблемой. Я также пытался сохранить телеметрический объект JSON вне состояния Redux, чтобы уменьшить его, и это не помогло.