---
title: Web Workers API
slug: Web/API/Web_Workers_API
tags:
- API
- NeedsTranslation
- Service Workers
- Shared Workers
- TopicStub
- Web Workers
- Workers
translation_of: Web/API/Web_Workers_API
---
<p>{{DefaultAPISidebar("Web Workers API")}}</p>
<p class="summary"><strong>Web Workers</strong> это механизм, который позволяет скрипту выполняться в фоновом потоке, который отделен от основного потока веб-приложения. <span id="result_box" lang="ru"><span>Преимущество заключается в том, ресурсоёмкие вычисления могут выполняться в отдельном потоке, позволяя запустить основной (обычно пользовательский) поток без блокировки и замедления</span></span>.</p>
<h2 id="Концепции_и_использование_Web_воркеров">Концепции и использование Web воркеров</h2>
<p>Worker (работник, воркер) - это объект созданный при помощи конструктора (например, {{domxref("Worker.Worker", "Worker()")}}), <span id="result_box" lang="ru"><span>который запускает именованный файл JavaScript - этот файл содержит код, который будет запускаться в потоке воркера;</span></span> воркеры запускаются в другом глобальном контексте отличном от текущего контекста {{domxref("window")}}. Этот контекст представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} <span id="result_box" lang="ru"><span>в случае специализированных воркеров (стандартные воркеры, которые используются одним скриптом, общие воркеры используют</span></span> {{domxref("SharedWorkerGlobalScope")}}).</p>
<p><span id="result_box" lang="ru"><span>Вы можете запустить любой код, который вам нравится внутри потока воркера, за некоторыми исключениями.</span> <span>Например, вы не можете напрямую манипулировать DOM внутри воркера или использовать некоторые методы и свойства по умолчанию</span></span> объекта {{domxref("window")}}. <span id="result_box" lang="ru"><span>Но вы можете использовать большое количество свойств и методов, доступных в</span></span> <code>window</code>, включая <a href="/en-US/docs/WebSockets">WebSockets</a>, и механизм хранения данных такой, как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> или <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API,</a> который доступен только в ОС Firefox. За дополнительной информацией смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции и классы доступные воркерам.</a></p>
<p><span id="result_box" lang="ru"><span>Данные отправляются между потоком воркера и основным потоком через систему сообщений - обе стороны отправляют свои сообщения с помощью метода <code>postMessage ()</code> и отвечают на сообщения через обработчик события <code>onmessage</code> (сообщение содержится в атрибуте данных события </span></span> {{event("Message")}}. Данные копируются, а не используются совместно.</p>
<p>Воркеры<span id="result_box" lang="ru"><span> могут, в свою очередь, создавать новых воркеров, в этом случае они должны иметь одно и то же происхождение - родительскую страницу.</span> <span>Кроме того, воркеры могут использовать </span></span><a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a><span lang="ru"><span> для сетевого ввода-вывода, за исключением того, что атрибуты <code>responseXML</code> и <code>channel </code>на XMLHttpRequest всегда возвращают значение <code>null</code>.</span></span></p>
<p><span id="result_box" lang="ru"><span>В дополнение к специализированным существуют и другие виды воркеров:</span></span></p>
<ul>
<li>Совместные воркеры<span id="result_box" lang="ru"><span> - это воркеры, которые могут использоваться несколькими скриптами совместно, работающими в разных окнах, IFrames и т.д. в пределах одного домена, что и воркер.</span> <span>Они немного сложнее, чем специализированные воркеры - скрипты должны связываться через активный порт.</span> <span>Подробнее см. {{domxref("SharedWorker")}}.</span></span></li>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> <span id="result_box" lang="ru"><span>по сути действуют как прокси-серверы, которые находятся между веб-приложениями, а также браузером и сетью (если доступны).</span> Помимо прочего о<span>ни предназначены для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих мер на основе доступности сети и обновления данных на сервере.</span> <span>Они также позволят доступ к push-уведомлениям и API-интерфейсам фоновой синхронизации.</span></span></li>
<li>Воркеры в Chrome - это воркеры специального типа Firefox<span id="result_box" lang="ru"><span>, которые вы можете использовать, если вы разрабатываете надстройки и хотите использовать воркеры в расширениях и иметь доступ к js-ctypes в вашем воркере</span></span>. Смотрите также {{domxref("ChromeWorker")}}. </li>
<li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>(аудио воркеры) <span id="result_box" lang="ru"><span>обеспечивают возможность прямой обработки аудиозаписей в рамках веб-контекста воркера.</span></span></li>
</ul>
<div class="note">
<p><span style="font-size: 14px; line-height: 21px;"><strong>Замечание</strong></span>: В соответствии с <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, события ошибок воркеров не должны "всплывать" (смотрите {{bug(1188141)}}. Такое поведение было реализовано в Firefox 42.</p>
</div>
<h2 id="Интерфейсы_Web_воркера">Интерфейсы Web воркера</h2>
<dl>
<dt>{{domxref("AbstractWorker")}}</dt>
<dd>Абстрактные свойства и методы общие для всех типов воркеров (т.е. {{domxref("Worker")}} или {{domxref("SharedWorker")}}).</dd>
<dt>{{domxref("Worker")}}</dt>
<dd><span id="result_box" lang="ru"><span>Представляет поток исполнения воркера, позволяющий передавать сообщения текущему коду воркера.</span></span></dd>
<dt>{{domxref("SharedWorker")}}</dt>
<dd><span id="result_box" lang="ru"><span>Представляет конкретный вид воркера, к которому можно получить доступ из нескольких контекстов, будь то несколько окон, iframe или даже воркеров.</span></span></dd>
<dt>{{domxref("WorkerGlobalScope")}}</dt>
<dd>Represents the generic scope of any worker (doing the same job as {{domxref("Window")}} does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.</dd>
<dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
<dd>Represents the scope of a dedicated worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
<dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
<dd>Represents the scope of a shared worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
<dt>{{domxref("WorkerNavigator")}}</dt>
<dd><span id="result_box" lang="ru"><span>Представляет идентификатор и состояние пользовательского агента (клиента)</span></span>.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p>Мы создали пару простых демонстрационных программ чтобы показать основы использования:</p>
<ul>
<li><a href="https://github.com/mdn/simple-web-worker">Базовый пример отдельного воркера</a> (<a href="http://mdn.github.io/simple-web-worker/">запускает отдельного воркера</a>).</li>
<li><a href="https://github.com/mdn/simple-shared-worker">Базовый пример разделяемого воркера</a> (<a href="http://mdn.github.io/simple-shared-worker/">запускает разделяемого воркера</a>).</li>
</ul>
<p>Больше информации о том, как работают эти демонстрационные программы, вы можете найти в статье <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Использование Web воркеров</a>.</p>
<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>Initial definition.</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>Базовая поддержка</td>
<td>4</td>
<td>{{CompatGeckoDesktop(1.9.1)}}</td>
<td>10.0</td>
<td>10.6</td>
<td>4</td>
</tr>
<tr>
<td>Разделяемые воркеры</td>
<td>4</td>
<td>{{CompatGeckoDesktop(29)}}</td>
<td>{{CompatNo}}</td>
<td>10.6</td>
<td>4</td>
</tr>
<tr>
<td>Передача данных через использование структурного клонирования</td>
<td>13</td>
<td>{{CompatGeckoDesktop(8)}}</td>
<td>10.0</td>
<td>11.5</td>
<td>6</td>
</tr>
<tr>
<td>Передача данных с использованием передаваемых объектов</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>Глобальный {{domxref("window.URL", "URL")}}</td>
<td>10<sup>[1]</sup><br>
23</td>
<td>{{CompatGeckoDesktop(21)}}</td>
<td>11</td>
<td>15</td>
<td>6<sup>[1]</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>Базовая поддержка</td>
<td>4.4</td>
<td>4</td>
<td>{{CompatGeckoMobile(1.9.1)}}</td>
<td>1.0.1</td>
<td>10.0</td>
<td>11.5</td>
<td>5.1</td>
</tr>
<tr>
<td>Разделяемые воркеры</td>
<td>{{CompatNo}}</td>
<td>4</td>
<td>29</td>
<td>1.4</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Передача данных через использование структурного клонирования</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>Передача данных с использованием передаваемых объектов</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] Как <code>webkitURL</code>.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Использование Web воркеров</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Интерфейс SharedWorker</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции и классы доступные воркерам</a></li>
<li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Продвинутые конфепции и примеры</a></li>
<li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: для использования воркеров в привелегированном/chrome коде</li>
</ul>