path: root/files/ru/dom/using_web_workers/index.html

---
title: Использование Web Workers
slug: DOM/Using_web_workers
tags:
  - воркер
  - поток
translation_of: Web/API/Web_Workers_API/Using_web_workers
---
<div>{{DefaultAPISidebar("Web Workers API")}}</div>

<p>Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (хотя атрибуты <code>responseXML</code> и <code>channel</code> всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья дает детальную инструкцию по использованию Web Workers.</p>

<h2 id="Web_Workers_API">Web Workers API</h2>

<p>Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернет ошибку.</p>

<p>Контекст Worker'а представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае выделенных Workers (обычные Workers используются одним скриптом; совместные Workers используют объект {{domxref("SharedWorkerGlobalScope")}}). Выделенный Worker доступен только из скрипта-родителя, в то время как совместные Workers могут быть доступны из нескольких сценариев.</p>

<div class="note">
<p><strong>Заметка</strong>: Смотрите <a href="/en-US/docs/Web/API/Web_Workers_API">страницу Web Workers API</a> для справки по Workers и прочие руководства.</p>
</div>

<p>Вы можете запускать любой код внутри потока worker-а, за некоторыми исключениями. Например, вы не можете прямо манипулировать DOM внутри worker-а, или использовать некоторые методы по умолчанию и свойства объекта {{domxref("window")}}. Но вы можете использовать большой набор опций, доступный под <code>Window</code>, включая <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, и механизмы хранения данных, таких как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> и относящихся только к Firefox OS <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Для дополнительной информации смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a>.</p>

<p>Данные передаются между worker-ами и главным потоком через систему сообщений — обе стороны передают свои сообщения, используя метод <code>postMessage()</code> и отвечают на сообщения при помощи обработчика событий <code>onmessage</code> (сообщение хранится в аттрибуте data события {{event("Message")}}). Данные при этом копируются, а не делятся.</p>

<p>Объекты Workers могут, в свою очередь, создавать новые объекты workers, и так до тех пор, пока всё работает в рамках текущей страницы. Плюс к этому, объекты workers могут использовать <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для сетевого ввода/вывода, но есть исключение - атрибуты <code>responseXML</code> и <code>channel</code> объекта <code>XMLHttpRequest</code> всегда возвращают <code>null</code>.</p>

<h2 id="Выделенные_Workers">Выделенные Workers</h2>

<p>Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдет о JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">основном примере выделенного Worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить скрипт</a>): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.</p>

<p>Этот пример достаточно тривиален, но для ознакомления с базовыми концепциями worker-ов мы решили его упростить. Более продвинутые детали описаны далее в статье.</p>

<h3 id="Определение_поддержки_Worker">Определение поддержки Worker</h3>

<p>Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>

<pre class="brush: js notranslate">if (window.Worker) {

  ...

}</pre>

<h3 id="Создание_выделенного_worker">Создание выделенного worker</h3>

<p>Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>

<div style="overflow: hidden;">
<pre class="brush: js notranslate">var myWorker = new Worker("worker.js");
</pre>
</div>

<h3 id="Передача_сообщений_в_и_из_выделенного_worker">Передача сообщений в и из выделенного worker</h3>

<p>Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>

<pre class="brush: js notranslate">first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}</pre>

<p>В приведенном фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными <code>first</code> и <code>second</code>; когда значение любой из переменных изменяется,<code> myWorker.postMessage([first.value,second.value])</code> используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента <code>message</code> возможна передача практически любых данных в worker.</p>

<p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p>

<pre class="brush: js notranslate">onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}</pre>

<p>Обработчик <code>onmessage</code> позволяет нам запустить некий код всякий раз, когда получен пакет с сообщением, доступным в атрибуте <code>data</code> события <code>message</code>. В примере выше мы просто перемножаем вместе две цифры, после чего используем <code>postMessage()</code> снова, чтобы отправить полученный результат назад в основной поток.</p>

<p>Возвращаясь в основной поток, мы используем <code>onmessage</code> снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:</p>

<pre class="brush: js notranslate">myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}</pre>

<p>В примере выше мы берём данные из события сообщения и ставим их как <code>textContent</code> у результирующего абзаца, чтобы показать пользователю результат этой калькуляции.</p>

<p class="note"><strong>Заметка</strong>: Обратите внимание, что <font face="consolas, Liberation Mono, courier, monospace"><code>onmessage()</code>​ и <code>postmessage()</code> должны вызываться из экземпляра Worker в главном потоке, но не в потоке worker-а. Это связано с тем, что внутри потока worker-а, worker выступает в качестве глобального объекта.</font></p>

<p class="note"><strong>Заметка</strong>: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передается" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.</p>

<h3 id="Завершение_работы_worker-а">Завершение работы worker-а</h3>

<p>Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:</p>

<pre class="brush: js notranslate">myWorker.terminate();</pre>

<p>Поток worker-а немедленно уничтожается.</p>

<h3 id="Обработка_ошибок">Обработка ошибок</h3>

<p>При ошибке во время выполнения worker-а, вызывается его обработчик событий <code>onerror</code>. Он принимает событие <code>error</code>, которое реализует интерфейс <code>ErrorEvent</code>.</p>

<p>Событие не всплывает и его можно отменить. Для отмены действия по умолчанию, worker может вызвать метод <a class="internal" href="/en-US/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code> </a> в обработчике события ошибки.</p>

<p>У события ошибки есть три поля, которые представляют интерес:</p>

<dl>
 <dt><code>message</code></dt>
 <dd>Сообщение об ошибке в читаемом виде.</dd>
 <dt><code>filename</code></dt>
 <dd>Имя файла со скриптом, в котором ошибка произошла.</dd>
 <dt><code>lineno</code></dt>
 <dd>Номер строки в файле, в котором произошла ошибка.</dd>
</dl>

<h3 id="Создание_subworkers">Создание subworkers</h3>

<p>Worker-ы могут запускать другие worker-ы. Так называемые sub-worker'ы должны быть того же происхождения (same-origin), что и родительский документ. Кроме того, URI для subworker-ов рассчитываются относительно родительского worker'а, а не родительского документа. Это позволяет worker-ам проще следить за тем, где находятся их зависимости.</p>

<h3 id="Импорт_скриптов_и_библиотек">Импорт скриптов и библиотек</h3>

<p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведенные примеры верны:</p>

<pre class="brush: js notranslate">importScripts();                        /* imports nothing */
importScripts('foo.js');                /* imports just "foo.js" */
importScripts('foo.js', 'bar.js');      /* imports two scripts */
</pre>

<p>Браузер загружает каждый указанный скрипт и исполняет его. Любые глобальные объекты, создаваемые каждым скриптом могут быть использованы в worker'е. Если скрипт не удалось загрузить, будет брошена ошибка <code>NETWORK_ERROR</code>, и последующий код не будет исполнен. Тем не менее код, исполненный ранее (включая отложенный при помощи {{domxref("window.setTimeout()")}}) останется функционален. Объявления функций идущие <strong>после</strong> вызова метода <code>importScripts()</code> также будут доступны, т.к. объявления функций всегда обрабатываются перед остальным кодом.</p>

<div class="note"><strong>Заметка</strong>: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в  том порядке, в котором имена файлов были переданы в <code>importScripts()</code>. Функция выполняется синхронно; <code>importScripts()</code> не вернет исполнение, пока все скрипты не будут загружены и исполнены.</div>

<h2 id="Разделяемые_worker-ы_Shared_workers">Разделяемые worker-ы (Shared workers)</h2>

<p>Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">базовом примере разделяемых worker-ов</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить разделяемый worker</a>): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: <em>умножение двух чисел</em> или <em>возведение числа в степень.</em> Оба скрипта используют один и тот же worker для необходимых вычислений.</p>

<p>Здесь мы сосредоточимся на разнице между выделенными и раздялемыми worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p>

<div class="note">
<p><strong>Заметка</strong>: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).</p>
</div>

<div class="note">
<p><strong>Заметка: </strong>В Firefox разделяемый worker не может быть использован совместно документами в приватном и неприватном окне ({{bug(1177621)}}).</p>
</div>

<h3 id="Создание_разделяемого_worker-а">Создание разделяемого worker-а</h3>

<p>Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> и <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — в каждом документе необходимо поднять worker, для этого следует написать такой код:</p>

<pre class="brush: js notranslate">var myWorker = new SharedWorker("worker.js");</pre>

<p>Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект <code>port</code> — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).</p>

<p>Соединение с портом должно быть осуществлено либо неявно, используя обработчик событие <code>onmessage</code>, либо явно, вызвав метод <strong>start()</strong> перед тем, как отправлять любые сообщения. Вызов метода start() необходим только тогда, когда подписка на событие реализована через метод <code>addEventListener()</code>.</p>

<div class="blockIndicator note">
<p><strong>Заметка: </strong>Когда используется метод <code>start()</code> чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.</p>
</div>

<pre class="brush: js notranslate">myWorker.port.start();  // в родительском потоке</pre>

<pre class="brush: js notranslate">port.start();  // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre>

<h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3>

<p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (еще раз, вы можете увидеть схожие кострукции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>

<pre class="brush: js notranslate">squareNumber.onchange = function() {
  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
  console.log('Message posted to worker');
}</pre>

<p>Теперь на стороне worker-а. Здесь код немного сложнее (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p>

<pre class="brush: js notranslate">self.addEventListener('connect', function(e) { // требуется addEventListener()
  var port = e.ports[0];
  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
  <s>port.start();</s>  // вызов необязательный, т.к. используется обработчик событий onmessage
});</pre>

<p>Первый этап состоит из события <code>onconnect</code>. Оно срабатывает, когда произошло подключение (т.е. когда в родительском потоке отработало событие <code>onmessage</code> или когда в нем был вызван метод <code>start()</code>).</p>

<p>Мы используем атрибут события <code>ports</code>, чтобы получить порт и сохранить его в переменной.</p>

<p>Второй этап — это обработчик события <code>message</code> на сохраненном порту. Он нужен для подсчета и вывода результата вычисления в основной поток. Установка обработчика <code>message</code> в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на <code>port.start()</code> на самом деле не нужен (см. код обработчика <code>onconnect</code>).</p>

<p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (еще раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>

<pre class="brush: js notranslate">myWorker.port.onmessage = function(e) {
  result2.textContent = e.data[0];
  console.log('Message received from worker');
}</pre>

<p>Когда сообщение приходит через порт от worker-а, мы проверяем тип результата вычислений и затем вставляем его в соответствующий абзац.</p>

<h2 id="О_потоковой_безопасности">О потоковой безопасности</h2>

<p>Интерфейс {{domxref("Worker")}} создаёт настоящие потоки на уровне операционной системы, что может смутить опытных программистов и навести их на мысли о проблемах, связанных с конфликтом доступа к общим объектам.</p>

<p>На самом деле создать такие проблемы достаточно сложно, так как worker-ы жёстко контролируются. У них нет доступа к непотокобезопасным объектам DOM, а все данные между потоками передаются в качестве сериализованных объектов. Придётся очень постараться, чтобы вызывать проблемы потокобезопасности в вашем коде.</p>

<h2 id="Передача_данных_в_и_из_worker-ов_другие_детали">Передача данных в и из worker-ов: другие детали</h2>

<p>Передача данных между главной страницей и worker-ом происходит путем копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создается свой. Большинство браузеров реализуют это структурированным клонированием (<a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>).</p>

<p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p>

<pre class="brush: js notranslate">function emulateMessage (vVal) {
    return eval("(" + JSON.stringify(vVal) + ")");
}

// Tests

// test #1
var example1 = new Number(3);
console.log(typeof example1); // object
console.log(typeof emulateMessage(example1)); // number

// test #2
var example2 = true;
console.log(typeof example2); // boolean
console.log(typeof emulateMessage(example2)); // boolean

// test #3
var example3 = new String("Hello World");
console.log(typeof example3); // object
console.log(typeof emulateMessage(example3)); // string

// test #4
var example4 = {
    "name": "John Smith",
    "age": 43
};
console.log(typeof example4); // object
console.log(typeof emulateMessage(example4)); // object

// test #5
function Animal (sType, nAge) {
    this.type = sType;
    this.age = nAge;
}
var example5 = new Animal("Cat", 3);
alert(example5.constructor); // Animal
alert(emulateMessage(example5).constructor); // Object</pre>

<p>Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из нее, используя <code>postMessage()</code>, и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.</p>

<p><strong>example.html</strong>: (главная страница):</p>

<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js");

myWorker.onmessage = function (oEvent) {
  console.log("Worker said : " + oEvent.data);
};

myWorker.postMessage("ali");</pre>

<p><strong>my_task.js</strong> (worker):</p>

<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\').");

onmessage = function (oEvent) {
  postMessage("Hi " + oEvent.data);
};</pre>

<p>Алгоритм структурированного клонирования может принять JSON и некоторые вещи, которые JSON не может принять, например, циклические ссылки.</p>

<h3 id="Примеры_передачи_данных">Примеры передачи данных</h3>

<h4 id="Пример_1_Расширенная_передача_JSON_данных_и_создание_системы_коммутации">Пример #1: Расширенная передача JSON данных и создание системы коммутации</h4>

<p>Если вам нужно передать сложные данные и вызвать множество различных функций как на главной странице, так и в worker-е, вы можете создать следующую систему.</p>

<p>В первую очередь мы создаем класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p>

<pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) {
    var instance = this,
        worker = new Worker(url),
        listeners = {};

    this.defaultListener = defaultListener || function() {};

    if (onError) {worker.onerror = onError;}

    this.postMessage = function(message) {
        worker.postMessage(message);
    }

    this.terminate = function() {
        worker.terminate();
    }
}</code>
</pre>

<p>Затем мы добавляем методы добавления/удаления обработчиков.</p>

<pre class="brush: js notranslate"><code>this.addListeners = function(name, listener) {
    listeners[name] = listener;
}

this.removeListeners = function(name) {
    delete listeners[name];
}</code>
</pre>

<p>Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.</p>

<pre class="brush: js notranslate"><code>/*
  Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать.
  Далее мы можем передать методу необходимые ему аргументы.
 */
this.sendQuery = function() {
    if (arguments.length &lt; 1) {
         throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
         return;
    }
    worker.postMessage({
        'queryMethod': arguments[0],
        'queryArguments': Array.prototype.slice.call(arguments, 1)
    });
}</code>
</pre>

<p>Завершим QueryableWorker методом <code>onmessage</code>.  Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в <code>listeners</code>:</p>

<pre class="brush: js notranslate"><code>worker.onmessage = function(event) {
    if (event.data instanceof Object &amp;&amp;
        event.data.hasOwnProperty('queryMethodListener') &amp;&amp;
        event.data.hasOwnProperty('queryMethodArguments')) {
        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
    } else {
        this.defaultListener.call(instance, event.data);
    }
}</code>
</pre>

<p>Теперь к самому worker-у. Сначала следует определить эти два простых метода:</p>

<pre class="brush: js notranslate"><code>var queryableFunctions = {
    getDifference: function(a, b) {
        reply('printStuff', a - b);
    },
    waitSomeTime: function() {
        setTimeout(function() {
            reply('doAlert', 3, 'seconds');
        }, 3000);
    }
}

function reply() {
    if (arguments.length &lt; 1) {
        throw new TypeError('reply - takes at least one argument');
        return;
    }
    postMessage({
        queryMethodListener: arguments[0],
        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
    });
}

/* This method is called when main page calls QueryWorker's postMessage method directly*/
function defaultReply(message) {
    // do something
}</code>
</pre>

<p>И <code>onmessage</code>:</p>

<pre class="brush: js notranslate"><code>onmessage = function(event) {
    if (event.data instanceof Object &amp;&amp;
        event.data.hasOwnProperty('queryMethod') &amp;&amp;
        event.data.hasOwnProperty('queryMethodArguments')) {
        queryableFunctions[event.data.queryMethod]
            .apply(self, event.data.queryMethodArguments);
    } else {
        defaultReply(event.data);
    }
}</code></pre>

<p>Полный код примера:</p>

<p><strong>example.html</strong> (основная страница):</p>

<pre class="brush: html notranslate"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"  /&gt;
      &lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
    /*
      QueryableWorker instances methods:
        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
        * terminate(): terminates the Worker
        * addListener(name, function): adds a listener
        * removeListener(name): removes a listener
      QueryableWorker instances properties:
        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
     */
    function QueryableWorker(url, defaultListener, onError) {
      var instance = this,
      worker = new Worker(url),
      listeners = {};

      this.defaultListener = defaultListener || function() {};

      if (onError) {worker.onerror = onError;}

      this.postMessage = function(message) {
        worker.postMessage(message);
      }

      this.terminate = function() {
        worker.terminate();
      }

      this.addListener = function(name, listener) {
        listeners[name] = listener;
      }

      this.removeListener = function(name) {
        delete listeners[name];
      }

      /*
        This functions takes at least one argument, the method name we want to query.
        Then we can pass in the arguments that the method needs.
      */
      this.sendQuery = function() {
        if (arguments.length &lt; 1) {
          throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
          return;
        }
        worker.postMessage({
          'queryMethod': arguments[0],
          'queryMethodArguments': Array.prototype.slice.call(arguments, 1)
        });
      }

      worker.onmessage = function(event) {
        if (event.data instanceof Object &amp;&amp;
          event.data.hasOwnProperty('queryMethodListener') &amp;&amp;
          event.data.hasOwnProperty('queryMethodArguments')) {
          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
        } else {
          this.defaultListener.call(instance, event.data);
        }
      }
    }

    // your custom "queryable" worker
    var myTask = new QueryableWorker('my_task.js');

    // your custom "listeners"
    myTask.addListener('printStuff', function (result) {
      document.getElementById('firstLink').parentNode.appendChild(document.createTextNode('The difference is ' + result + '!'));
    });

    myTask.addListener('doAlert', function (time, unit) {
      alert('Worker waited for ' + time + ' ' + unit + ' :-)');
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="javascript:myTask.sendQuery('waitSomeTime');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="javascript:myTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<p><strong>my_task.js</strong> (код worker-а):</p>

<pre class="brush: js notranslate"><code>var queryableFunctions = {
  // пример #1: получить разницу между двумя числами
  getDifference: function(nMinuend, nSubtrahend) {
      reply('printStuff', nMinuend - nSubtrahend);
  },
  // пример #2: подождать три секунды
  waitSomeTime: function() {
      setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000);
  }
};

// системные функции

function defaultReply(message) {
  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
  // do something
}

function reply() {
  if (arguments.length &lt; 1) { throw new TypeError('reply - not enough arguments'); return; }
  postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) });
}

onmessage = function(oEvent) {
  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty('queryMethod') &amp;&amp; oEvent.data.hasOwnProperty('queryMethodArguments')) {
    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
  } else {
    defaultReply(oEvent.data);
  }
};</code>
</pre>

<p>Можно переключать содержимое каждой главной страницы -&gt; worker и worker -&gt; сообщение главной страницы. И имена свойств "queryMethod", "queryMethodListeners", "queryMethodArguments" могут быть любыми пока они согласуются с <code>QueryableWorker</code> и <code>worker</code>.</p>

<h3 id="Передача_данных_с_помощью_передачи_владения_передаваемые_объекты">Передача данных с помощью передачи владения (передаваемые объекты)</h3>

<p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определенных типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой призводительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст.  Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у,  исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования.  Его содержание (в буквальном смысле) переносится в рабочий контекст.</p>

<pre class="brush: js notranslate">// Create a 32MB "file" and fill it.
var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
for (var i = 0; i &lt; uInt8Array.length; ++i) {
  uInt8Array[i] = i;
}

worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
</pre>

<div class="note">
<p><strong>Заметка</strong>: Для дополнительной информации о передаваемых объектах, производительности и поддержки для этого метода, читайте  <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> на HTML5 Rocks.</p>
</div>

<h2 id="Встроенные_worker-ы">Встроенные worker-ы</h2>

<p>Не существует утвержденного способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет аттрибута <code>src</code> и аттрибута  <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p>

<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>MDN Example - Embedded worker<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
  <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что  его MIME-тип text/js-worker.</span>
  <span class="keyword token">var</span> myVar <span class="operator token">=</span> <span class="string token">'Hello World!'</span><span class="punctuation token">;</span>
  <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token">
</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
  <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span>
  <span class="keyword token">function</span> <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="parameter token">sMsg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="comment token">// Use a fragment: browser will only render/reflow once.</span>
    <span class="keyword token">var</span> oFragm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>sMsg<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'br'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#logDisplay'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>oFragm<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
  <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span>
  <span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="function token">postMessage</span><span class="punctuation token">(</span>myVar<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span><span class="punctuation token">;</span>
  <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token">
</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
  <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span>

  <span class="comment token">// В прошлом...:</span>
  <span class="comment token">// blob builder существовал</span>
  <span class="comment token">// ... но теперь мы используем Blob...:</span>
  <span class="keyword token">var</span> blob <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Blob</span><span class="punctuation token">(</span><span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function token">map</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'script[type=\'text\/js-worker\']'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">oScript</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> oScript<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">,</span><span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">'text/javascript'</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

  <span class="comment token">// Создание нового свойства document.worker, содержащего все наши "text/js-worker" скрипты.</span>
  document<span class="punctuation token">.</span>worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span><span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

  document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="string token">'Received: '</span> <span class="operator token">+</span> oEvent<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span><span class="punctuation token">;</span>

  <span class="comment token">// Запуск воркера.</span>
  window<span class="punctuation token">.</span><span class="function function-variable token">onload</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>logDisplay<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code>
</pre>

<div id="logDisplay">Встраиваемый worker теперь внесен в новое custom свойство <code>document.worker</code></div>

<div></div>

<div>Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:</div>

<pre class="notranslate">function fn2workerURL(fn) {
  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
  return URL.createObjectURL(blob)
}
</pre>

<h2 id="Другие_примеры">Другие примеры</h2>

<p>В этой секции представлено еще несколько примеров как использовать worker-ы.</p>

<h3 id="Выполнение_вычислений_в_фоне">Выполнение вычислений в фоне</h3>

<p>Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоемкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.</p>

<h4 id="Код_JavaScript">Код JavaScript</h4>

<p>Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.</p>

<pre class="brush: js notranslate">var results = [];

function resultReceiver(event) {
  results.push(parseInt(event.data));
  if (results.length == 2) {
    postMessage(results[0] + results[1]);
  }
}

function errorReceiver(event) {
  throw event.data;
}

onmessage = function(event) {
  var n = parseInt(event.data);

  if (n == 0 || n == 1) {
    postMessage(n);
    return;
  }

  for (var i = 1; i &lt;= 2; i++) {
    var worker = new Worker("fibonacci.js");
    worker.onmessage = resultReceiver;
    worker.onerror = errorReceiver;
    worker.postMessage(n - i);
  }
 };</pre>

<p>Worker устанавливает свойство <code>onmessage</code> для функции,  которая будет получать сообщения, отправленные при вызове <code>postMessage()</code> рабочего объекта (обратите внимание, что это отличается от определения глобальной <em>переменной</em> с таким именем или определения <em>функции</em> с таким именем. <code>var onmessage</code> и <code>function onmessage</code> будет определять глобальные свойства с этими именами , но они не будут регистрировать функцию для получения сообщений, отправленных веб-страницей, которая создала worker). Это запускает рекурсию, порождая новые копии для обработки каждой итерации вычисления.</p>

<h4 id="HTML_код">HTML код</h4>

<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span>  <span class="punctuation token">/&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Test threads fibonacci<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">language</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">

    <span class="keyword token">var</span> worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'fibonacci.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

    worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
      document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'result'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> event<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
      <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Got: '</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>data <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="punctuation token">}</span><span class="punctuation token">;</span>

    worker<span class="punctuation token">.</span><span class="function function-variable token">onerror</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
      <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Worker error: '</span> <span class="operator token">+</span> error<span class="punctuation token">.</span>message <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="keyword token">throw</span> error<span class="punctuation token">;</span>
    <span class="punctuation token">}</span><span class="punctuation token">;</span>

    worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">'5'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

  </span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>Веб-страница создает элемент <code>div</code> с ID <code>result</code> , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик <code>onmessage</code> настроен для отображения результатов путем установки содержимого элемента <code>div</code>, и обработчик <code>onerror</code> настроен на <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">выброс</a> сообщения об ошибке.</p>

<p>Наконец, сообщение отправляется worker-у, чтобы запустить его.</p>

<p><a class="external" href="/samples/workers/fibonacci">Попробуйте этот пример</a>.</p>

<h3 id="Выполнение_веб_IO_в_фоне">Выполнение веб I/O в фоне</h3>

<p>Вы можете найти пример этого в статье <a class="internal" href="/en-US/docs/Using_workers_in_extensions">Использование worker-ов в расширениях</a>.</p>

<h3 id="Разделение_задач_между_множественными_worker-ами">Разделение задач между множественными worker-ами</h3>

<p>Поскольку многоядерные компьютеры становятся все более распространенными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.</p>

<h2 id="Другие_типы_worker-ов">Другие типы worker-ов</h2>

<p>В дополнение к выделенным и совместно используемым web worker-ам доступны другие типы worker-ов:</p>

<ul>
 <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>, по сути, действуют как прокси-серверы, которые размещаются между веб-приложениями, браузером и сетью (при наличии). Они предназначены (помимо прочего) для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих действий в зависимости от того, доступна ли сеть, и обновлены ли ресурсы на сервере. Они также разрешают доступ push-уведомлениям и API фоновой синхронизации.</li>
 <li>Chrome Workers это worker типа Firefox-only, который вы можете использовать, если вы разрабатываете дополнения и хотите использовать worker-ы в расширениях и иметь доступ к <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> в вашем worker-е. Смотрите {{domxref("ChromeWorker")}} для более подробной информации.</li>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> предоставляют возможность прямой обработки звука по сценарию в контексте web worker-а.</li>
</ul>

<h2 id="Функции_и_интерфейсы_доступные_в_worker-ах">Функции и интерфейсы доступные в worker-ах</h2>

<p>Внутри web worker-а вы можете использовать большинство стандартных функций JavaScript, включая:</p>

<ul>
 <li>{{domxref("Navigator")}}</li>
 <li>{{domxref("XMLHttpRequest")}}</li>
 <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, и {{jsxref("Global_Objects/String", "String")}}</li>
 <li>{{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, и {{domxref("WindowTimers.setInterval")}}</li>
</ul>

<p>Главное, что вы не можете сделать в Worker это напрямую повлиять на родительскую страницу. Это включает в себя манипулирование DOM и использование объектов этой страницы. Вы должны сделать это косвенно, отправив сообщение обратно основному сценарию через {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, а затем выполнив изменения оттуда.</p>

<div class="note">
<p><strong>Заметка</strong>: Для знакомства с  полным списком функций,  доступных для worker-ов, смотрите статью <a href="/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Функции и интерфейсы доступные worker-ам</a>.</p>
</div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Без изменений {{SpecName("Web Workers")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('Web Workers')}}</td>
   <td>{{Spec2('Web Workers')}}</td>
   <td>Начальное определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>10.0</td>
   <td>10.6<sup>[1]</sup></td>
   <td>4<sup>[2]</sup></td>
  </tr>
  <tr>
   <td>Shared workers</td>
   <td>4<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop(29)}}</td>
   <td>{{CompatNo}}</td>
   <td>10.6</td>
   <td>5<br>
    {{CompatNo}} 6.1<sup>[4]</sup></td>
  </tr>
  <tr>
   <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
   <td>13</td>
   <td>{{CompatGeckoDesktop(8)}}</td>
   <td>10.0</td>
   <td>11.5</td>
   <td>6</td>
  </tr>
  <tr>
   <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
   <td>17 {{property_prefix("webkit")}}<br>
    21</td>
   <td>{{CompatGeckoDesktop(18)}}</td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>6</td>
  </tr>
  <tr>
   <td>Global {{domxref("window.URL", "URL")}}</td>
   <td>10<sup>[3]</sup><br>
    23</td>
   <td>{{CompatGeckoDesktop(21)}}</td>
   <td>11</td>
   <td>15</td>
   <td>6<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.4</td>
   <td>4<sup>[1]</sup></td>
   <td>3.5</td>
   <td>1.0.1</td>
   <td>10.0</td>
   <td>11.5<sup>[1]</sup></td>
   <td>5.1<sup>[2]</sup></td>
  </tr>
  <tr>
   <td>Shared workers</td>
   <td>{{CompatNo}}</td>
   <td>4<sup>[1]</sup></td>
   <td>8</td>
   <td>1.0.1</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
   <td>{{CompatNo}}</td>
   <td>4</td>
   <td>8</td>
   <td>1.0.1</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>18</td>
   <td>1.0.1</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Chrome и Opera выдают ошибку "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" когда вы пытаетесь запустить worker локально. Нужно быть на надлежащем домене.</p>

<p>[2] Начиная с Safari 7.1.2, вы можете вызывать <code>console.log</code> изнутри worker-а, но он ничего не выведет в консоль. Более старые версии Safari не ползволяют вызывать <code>console.log</code> изнутри worker-а</p>

<p>[3] Эта функция реализована с префиксом как <code>webkitURL</code>.</p>

<p>[4] Safari <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">удалил поддержку SharedWorker</a>.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><code><a class="internal" href="/en-US/docs/Web/API/Worker">Worker</a></code> интерфейс</li>
 <li><code><a class="internal" href="/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code> интерфейс</li>
 <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции доступные для worker-ов</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Продвинутые концепции и примеры</a></li>
</ul>