В Firefox и IE виснет контекст при работе промисов, в chromium-based браузерах — нет, почему и как исправить?

Question

[leha_trushin]

Всем привет!
В некотором смысле вопрос в продолжении темы... Есть операция, требующая на выполнение довольно большой промежуток (около пары секунд) времени. Запускаю эту операцию асинхронно в промисе. Операции однотипные, но их множество. Выполняются в цепочке последовательных промисов одна за одной. Так вот, в тот момент, когда начинает выполняться новая асинхронная операция, на все время ее исполнения интерфейс страницы браузера виснет в Firefox и IE, но при этом почему-то работает нормально в chromium-based браузерах. Да, JS по сути своей однопоточный. Асинхронные операции выполняются тогда, когда основной синхронный поток свободен. Но каким образом не дать асинхронному потоку замораживать взаимодействие с интерфейсом в этих двух браузерах?

Answer 1

[Николай]

1 вариант - используйте webworker: https://developer.mozilla.org/ru/docs/DOM/Using_we...
2 вариант - бейте промис на цепочку маленьких. Тогда интерфейс будет более отзывчив

Comments

[leha_trushin]

Воркеры не пойдут, ибо они только с IE 11 более менее поддерживаются, а тут поддержка многих браузеров старых версий нужна
Второй вариант, к сожалению, физически невозможен, ибо операция выполняется на аппаратном устройстве и ее никак не разбить

[Николай]

leha_trushin: что значит второй пункт?

[leha_trushin]

Николай: это значит, что через API выполняется функция, заложенная на некотором внешнем носителе.
И хочется понять, почему в chromium-based браузерах это работает лучше? Там каким-то образом приоритеты "процессов" задаются или что-то иное? Можно ли это как-то использовать в других браузерах?

[Николай]

leha_trushin: через API выполняется функция...т.е. синхронное API какого-то внешнего устройства? У этого устройства есть асинхронное API?

[leha_trushin]

Николай: Есть и синхронное, и асинхронное API. Вызывается то, которое поддерживается на стороне пользователя (давайте только не углубляться сюда, ибо дальше описано, что я, какой бы не вызывался API, делаю его асинхронным). Это API само по себе возвращает промис. Но вызов этого API я оборачиваю в промис с setTimeout(... resolve(API.func()), 0), чтобы в любом случае выполнять функцию асинхронно

[Николай]

leha_trushin: вы можете выложить пример кода? Потому что по вашим объяснениям тяжело понять в чем именно проблема.

[leha_trushin]

Николай: Есть две функции API (буду писать простые названия функций и без параметров, дабы не усложнять): funcSync(...) - синхронная и funcAsync(...) - асинхронная.
Вызов их происходит из некой функции funcGo(...) следующим образом:

function funcGo(...)
{
	return new Promise(function(resolve) 
	{
		if(canAsync())
		{
			onAsync().then(function()
			{
				resolve(funcAsync(...));
			});
		}
		else
		{
			resolve(funcSync(...));
		}
	}
}

Этот кусок кода я править не могу. И дабы не заморачиваться и каким-то образом узнавать, асинхронная ли функция была запущена или нет, я запускаю функцию funcGo в промисе следующим образом:

setTimeout(function()
{
	resolve(funcGo(...));
}, 0);

Во все эти функции пробрасывается массив параметров (1 параметр на 1 запуск через 1 промис). Пусть массив параметров - ar[]. Цепочка промисов тогда выглядит примерно так:

// Начало цепочки
let chain = Promise.resolve();
ar.forEach(function(a, i)
{
	chain = chain.then(function()
	{
		return new Promise(function(resolve)
		{
			
			setTimeout(function()
			{
				//Тут выводим, что i-й промис запущен
				$(selector + i).text('Запущен ' + i);
				resolve(funcGo(a, ...));
			}, 0);
		});                    
	})
	.then(function(result)
	{
		//Тут выводим, что i-й промис обработан
		$(selector + i).text('Обработан ' + i);
	})
	.catch(function(error)
	{
		return Promise.reject(error);
	});
});

В процессе работы цепочки промисов в интерфейс выводятся сообщения о запуске/обработке текущего промиса. Каждый i-й результат выводится в заранее подготовленный DOM-объект selector + i. По мере того, как промисы обрабатываются, место для отображения прогресса заканчивается, появляется скролл-бар. Если скроллить по этому бару, то вот тут и проявляются зависания и т.д. Еще есть механизм отмены работы промисов по нажатию на кнопку, кнопка тоже тупит. Но это не буду описывать, дабы не усложнять. Ибо природа подвисания скролла и кнопки одинакова.