Принудительно перерисовывать холст HTML5 при выполнении тяжелой обработки JavaScript?

Question

Этот вопрос относится к этому более старому, , но я хотел убедиться, что у меня был правильный ответ, прежде чем я начал вносить серьезные изменения в свой код.

Я работаю над очень сложной для JavaScript программой, которой необходимо постоянно обновлять изображение на холсте HTML5 для рисования анимации. Как написано сейчас, код рисует все кадры анимации в тесном цикле, не возвращая управление браузеру, а это означает, что то, что в итоге отображается, является только последним кадром. Я уверен, что единственный способ исправить это - разделить код анимации на более мелкие части, которые можно вызывать повторно через событие тайм-аута. Это правильно? Или есть способ заставить холст отображать его содержимое в определенной точке даже в середине узкого цикла JavaScript?

Answer 1

Я почти уверен, что единственный способ исправить это - разделить код анимации на более мелкие части, которые можно вызывать повторно через событие тайм-аута.Это правильно?

Это является правильным.

Javascript является однопоточным, поэтому больше ничего не произойдет во время выполнения вашей логики.Ваш единственный выбор - «эмулировать» потоки, разделив вашу логику на микрочанки, которые будут выполняться по тайм-ауту.

Answer 2

Вы можете использовать веб-работников для этого, если они доступны.Просто рассчитайте все, что вам нужно сделать в веб-работниках, и опубликуйте результат, когда он будет готов.Когда вы отправляете сообщение обратно, вы можете просто обновить изображение.Расчеты будут выполняться в фоновом режиме, и ваша страница будет блокироваться только при обновлении изображения.