Web API: Запустить скрипт в фоновом потоке с помощью Web Worker

Web Worker — это веб-технология, которая позволяет запускать скрипты на фоне, независимо от основных скриптов веб-страницы, что улучшает производительность, предотвращая замедление или замирание веб-страницы. Web Workers представляют собой простой способ для веб-страницы выполнять код параллельно, так как JavaScript является однопоточным.

Пример использования Web Worker

В этом примере основной поток страницы запрашивает от веб-воркера (worker.js) вычисление 40-го числа Фибоначчи и затем выводит полученный результат в консоль. Весь процесс вычисления происходит в фоновом потоке, что позволяет основному потоку страницы оставаться отзывчивым для пользовательского ввода и других задач.

Сначала создадим файл Web Worker worker.js, который будет выполнять задачу по вычислению чисел Фибоначчи.

self.addEventListener( 'message', function(e)
{
	var data = e.data;
	
	switch( data.cmd )
	{
		case 'calculate':
			var result = fibonacci( data.number );
			self.postMessage( result );
		break;

		case 'stop':
			self.postMessage( 'Worker остановлен.' );
			self.close(); 
			// Завершаем работу worker'a.
		break;
	};
}, false);

function fibonacci(n)
{
	var a = 0;
	var b = 1;

	for (var i = 0; i < n; i++)
	{
		var temp = a;
		a = b;
		b = temp + b;
	}
	
	return a;
}

Затем на главной веб-странице создадим и используем этот Web Worker:

// Проверяем, поддерживается ли Web Worker в браузере
if( typeof( Worker ) !== 'undefined' )
{
	// Создаем Web Worker
	var myWorker = new Worker( 'worker.js' );

	// Отправляем сообщение в Worker
	myWorker.postMessage({
		cmd: 'calculate', 
		number: 40 // Посчитаем 40-е число Фибоначчи
	});

	// Получаем ответ от Worker
	myWorker.onmessage = function( event )
	{
		console.log( '40-е число Фибоначчи: ' + event.data );
	};
} 
else 
{
	console.log( 'Web Worker не поддерживается в вашем браузере.' );
}