Отделите интерактивное перемещение аннотаций от тяжёлого расчёта пикселей: рисуйте быстро, а анализ выполняйте асинхронно и порционно.
Есть два canvas одинакового размера: на нижнем изображение, на верхнем пользователь рисует и перемещает аннотации. При каждом изменении аннотации выполняется тяжёлый линейный расчёт пикселей, и интерфейс начинает тормозить. Как бы вы решили эту проблему?
Отделите интерактивное перемещение аннотаций от тяжёлого расчёта пикселей: рисуйте быстро, а анализ выполняйте асинхронно и порционно.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Отделите интерактивное перемещение аннотаций от тяжёлого расчёта пикселей: рисуйте быстро, а анализ выполняйте асинхронно и порционно.
Кешируйте неизменяемое нижнее изображение, пересчитывайте только затронутую область и ограничьте частоту обновлений через requestAnimationFrame. Тяжёлую обработку можно вынести в worker; результат привязывайте к версии аннотаций, чтобы устаревший ответ не заменил новый.