Подвисает браузер на "тяжелой" задаче.
 

Друзья, подскажите, пожалуйста.
Какой правильно подход использовать для разбиения "тяжелой" процедуры на подзадачи, как везде советуют . В таком коде браузер зависает с сообщением "окно не отвечает ...Подождать?"
...Promise.then((...) => {
// всякие преобразования... долго выполняемый код
})
Идеально на экран выдавать прогрессбар...но, как я понимаю, рендер будет ждать окончания "тяжелого" кода и потом что-то нарисует.
Спасибо.

Я такое просто "стартую" и сразу возвращаю некую "ссылку/ключ".
Потом с некой периодичностью опрашиваю сервер с этой "ссылкой/ключем" и получаю ответ типа "готово или нет" и "на каком этапе"...
Если готово - запрашиваю данные.
Если не готово - как-то отображаю "прогресс" на клиенте...

Тяжелый код сейчас можно пихать в webworker.
Вот тут недавно делал простой пример(содержимое не суть).

Либо разбивать ваши вычисления на куски, которые уже в свою очередь вызывать через Promise.then. Просто засунуть код в Promise.then никак вам не поможет, это не магия.

если в Promise.then, то всё равно будет подвисать, это же очередь микротасков. Надо в setTimeout

Или requestIdleCallback, если не думать про Safari

К сожалению это выполняется на клиенте. Апдейтится огромный JSON в цикле. На сервер это переносить - даже сразу не соображу, что это может затронуть.

С этим никогда не работал. Спасибо. Попробую. Идеально было бы - на несколько миллисекунд останавливать цикл, чтобы сделать промежуточный рендер.

сonst aLittle = () => new Promise(setTimeout);

for(let i = 0; i < length; i++) {
  // code
  if(i%1000 === 0) await aLittle();
}

=)

Если без всяких изысков, по простому, то как то так

// количество итераций, которое надо сделать
const N = 100500 ;
// гарантировано без тормозов можно сделать итераций
const NS = 100;  

let start = 0;

function workns () {
	const ne = Math.min(N, start+NS)
	let i;
	for (i = start; i< ne; i++) {
		/* тут делаем итерацию */
	}
	start = i;
}

function idleWork (time) {
	while (time.timeRemaining() > 0 && start < N) {
		workns()
	}
	if (start < N) requestIdleCallback(idleWork);
}

requestIdleCallback(idleWork);

Немного похоже на requestAnimationFrame, но есть возможность проверить( .timeRemaining() ) - сколько времени еще примерно есть

Принцип один и тот же...
Запускаешь в setTimeout()... Процесс пишет что-то о себе в "общедоступное место"...
Остается только с неким таймаутом мониторить "то место" и по готовности получить данные для использования.