Ресурсоемкая функция подвешивает браузер?

Question

[magary4]

функция переберает массив большого количества обьектов, и производит определенные вычисления с каждым обьектом. во время выполнения функции в браузере все ужасно тормозит. нагуглил решение обернуть в setTimeout( fun, 1); но по большому счету ничего не поменялось.
как решить эту ситуацию?

Answer 1

[Максим Дунаевский]

Web Workers.

Answer 2

[Сергей Протько]

Проблема простая - JS однопоточный. Более того, он работает в том же потоке, в котором и UI обрабатывается. То есть если вы залочили выполнение перебором - то печаль беда.

Варианты - самый наилучший - вынести тяжелую задачу в WebWorker-ы. Их для этого и придумали.

Другой вариант, если вам важна поддержка старых браузеров - делать паузы через каждые N операций. То есть у вас скажем массив с миллионом айтемов. Можно попробовать все делать асинхронно через setTimeout, что разгрузит event loop и позволит в перерывах UI-ке реагировать. И да это кастыль.

Comments

[magary4]

>> позволит в перерывах UI-ке реагировать

ну так это можно заюзать async там можно запустить выполнение сериями, и выстваить паузу между сериями

Answer 3

[teotlu]

Самый главный совет — оптимизировать работу функции. Что за вычисления производятся над объектами? Может, стоит использовать нативную функцию map для произведения этих вычислений над всеми объектами массива? Может, есть какое-то тяжёлое место в ваших вычислениях, которое в цикле даёт огромный прирост к нагрузке?
А setTimeout посоветовали затем, чтобы функция работала асинхронно и не блокировала весь последующий код. Но если функция сама по себе излишне тяжёлая, это не является решением проблемы.

Comments

[Сергей Протько]

> нативную функцию map

функция map не нативна и значительно медленнее for

[teotlu]

Сергей Протько: спасибо, это меня подвело моё знание js.