Коротко о проблеме
- Обработчик с бесконечным циклом выполняется в основном потоке (UI thread). Браузер не может обработать события, отрисовать страницу или выполнить другие скрипты, пока цикл не завершится — страница «зависает», пользователь не может кликать/прокручивать, может появиться предупреждение «стропорился скрипт», высокий расход CPU и возможный краш таба.
Как этого избегать — практические подходы
1) Вынести тяжёлую работу в Web Worker
- Web Worker выполняется в отдельном потоке и не блокирует UI.
Пример (главный поток):
```
const w = new Worker('worker.js');
w.postMessage(dataForWork);
w.onmessage = e => console.log('результат', e.data);
```
worker.js:
```
self.onmessage = e => {
const result = heavyComputation(e.data); // долгий код
postMessage(result);
};
```
- Плюсы: полноценный параллелизм, можно завершить worker через `w.terminate()`.
2) «Дробить» работу (chunking) и отдавать управление собыйному циклу
- Выполняйте работу частями и между частями возвращайте управление браузеру через `setTimeout(..., 0)`, `requestAnimationFrame` или `await new Promise(r=>setTimeout(r,0))`.
Пример:
```
function process(items){
let i = 0;
function chunk(){
const end = Math.min(i + 1000, items.length);
for(; i < end; i++){
doWork(items[i]);
}
if(i < items.length) setTimeout(chunk, 0); // даём браузеру отрисовать/обработать события
}
chunk();
}
```
- Подходит, если можно разбить задачу. Сохраняет отзывчивость UI.
3) Использовать requestIdleCallback для фоновой работы
- `requestIdleCallback` выполняет работу, когда основной поток свободен. Имеет полифилл/фолбек.
```
function backgroundWork(deadline){
while(deadline.timeRemaining() > 0 && tasks.length) {
doWork(tasks.shift());
}
if(tasks.length) requestIdleCallback(backgroundWork);
}
requestIdleCallback(backgroundWork);
```
4) OffscreenCanvas и другие API для тяжёлой графики
- Для сложной отрисовки можно использовать `OffscreenCanvas` в worker, чтобы не блокировать основной поток.
5) WebAssembly + Worker
- Если вычисления CPU‑интенсивны, реализуйте их в WebAssembly и запускайте в Worker — это быстрее и не блокирует UI.
Дополнительные советы
- Не пытайтесь «освежать» UI через microtasks (`Promise.then`) — они не дают контроль браузеру об отрисовке. Используйте макротаски (`setTimeout`) или yield через `await` с таймаутом.
- Реализуйте возможность отмены/прерывания: при работе в worker — `terminate()`; при chunking — флаг `shouldStop`.
- Профилируйте: иногда проблема не алгоритм, а частые DOM-операции — минимизируйте перерисовки.
Вывод
- Нельзя выполнять тяжёлые или бесконечные циклы в основном потоке. Вынесите работу в Web Worker или выполняйте её по частям, отдавая управление браузеру — тогда интерфейс останется отзывчивым.