1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
---
title: Web Workers API
slug: Web/API/Web_Workers_API
translation_of: Web/API/Web_Workers_API
---
<p>{{DefaultAPISidebar("Web Workers API")}}</p>
<p class="summary"><strong>Web Workers</strong> це механізм, який дозволяє запускати скрипові операції у фоновому потоці, окремо від основного діючого потоку web-додатку. Перевага цього методу в тому, що трудоміські процеси можуть виконуватися в окромому потоці, дозволяючи основному (зазвичай UI) потоку працювати без блокування/сповільнення.</p>
<h2 id="Концепція_та_використання_Web_Workers">Концепція та використання Web Workers</h2>
<p>Worker це об'єкт, який створюється з використанням конструктору (e.g. {{domxref("Worker.Worker", "Worker()")}}), який запускає вказаний JavaScript-файл — файл, який містить код, що буде запущений у робочому потоці; workers запускаються у іншому глобальному контексті, який не є поточним {{domxref("window")}}. Цей контекст представляюється об'єктом {{domxref("DedicatedWorkerGlobalScope")}} у разі виділеного workers (стандартний workers, <span class="short_text" id="result_box" lang="uk"><span>які</span> <span>використовуються</span> <span>одним </span><span>сценарієм</span><span>;</span></span> загальні workers використовують {{domxref("SharedWorkerGlobalScope")}}).</p>
<p>У потоці workers можна запускати будь-який код з невеликкими винятками. Наприклад, не можна напряму маніпулювати DOM з worker або використовувати деякі стандартні методи та властивості об'єкту {{domxref("window")}}, але можна використовувати велику кількість речей, доступних <code>з window</code>, включаючи <a href="/en-US/docs/WebSockets">WebSockets</a>, та механізми зберігання даних, як <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> та Firefox OS-only <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">Функції та класи, доступні для workers</a> для більшої детальності.</p>
<p>Дані передаються між workers та основним потоком за допомогою системи сповіщення — обидві сторони пересилають свої сповіщення, використовуючи методи<code> postMessage()</code>, та відповідаюсь через обробник подій <code>onmessage</code> (повідомлення містится всепредині атрибутів даних {{event("Message")}} ). Дані копіюються, а не поширюються.</p>
<p>Workers можуть в свою чергу породжувати нові workers, за умови, що ці workers будуть розміщуватися в межах однієї й тієї ж самої сорінки, що й батьківський worker. На додаток, 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>
<p>Окрім виділених workers, є й інши типи:</p>
<ul>
<li>Загальні workers - можуть бути використані декількома сценаріями, запускаючись в різних вікнах, IFrames, тощо, якщо вони у одному домені з worker. Вони трохи складніші, ніж виділені workers — скрипти мають спілкуватися через активний порт. Дивіться {{domxref("SharedWorker")}} для більшї детальності.</li>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> по суті виступають в якості проксі-серверу, знаходячись між web-додатком, браузером й мережею (коли доступна). Вони призначені для того (зокрема іншого), щоб давати змогу створювати ефективний offline-функціонал, перехоплення мережевих запитів та прийняття відповідних заходів, основуючись на тому, чи доступна мережа, та поновювати данні більш переважними з серверу. Вони також дозволяють доступ для додавання сповіщень та фонових синхроних APIs.</li>
<li>Chrome Workers є Firefox-only типом worker, що можна використовуати, якщо розроблюється доповнення та бажано використовувати workers й мати доступ до <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>
<div class="note">
<p><strong>Примітка</strong>: Згіздно з <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, події помилок worker не повинні вспливати (дивіться {{bug(1188141)}}. Це було реалізовано у Firefox 42.</p>
</div>
<h2 id="Інтерфейси_Web_Worker">Інтерфейси Web Worker</h2>
<dl>
<dt>{{domxref("AbstractWorker")}}</dt>
<dd>Абстрактні властивості та методи, загальні для всіх видів workers ({{domxref("Worker")}} або {{domxref("SharedWorker")}}).</dd>
<dt>{{domxref("Worker")}}</dt>
<dd>Представляє собою діючий поток worker, дозволяючи передавати сповіщення запущеному коду worker.</dd>
<dt>{{domxref("SharedWorker")}}</dt>
<dd>Представляє собою специфічний вид worker, який може бути <em>доступний</em> з декількох контекстів браузерів, будучи декількома вікнами, iframes або іншими workers.</dd>
<dt>{{domxref("WorkerGlobalScope")}}</dt>
<dd>Представляє собою загальний scope будь-якого worker (виконуючи ту ж роботу, що й {{domxref("Window")}} для звичайного контенту web). Різні види worker мають об'єкт scope, який наслідується з цього інерфейсу та додає більше специфічних особливостей.</dd>
<dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
<dd>Представляє собою scope виділеного worker, наслудуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.</dd>
<dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
<dd>Представляє собою scope загального worker, наслідуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.</dd>
<dt>{{domxref("WorkerNavigator")}}</dt>
<dd>Представляє собою ідентифікатор та стан користувача (клієнта):</dd>
</dl>
<h2 id="Приклади">Приклади</h2>
<p>Ми створили декілька простих прикладів, щоб показати основне вікористання:</p>
<ul>
<li><a href="https://github.com/mdn/simple-web-worker">Основні приклади виділеного worker </a>(<a href="http://mdn.github.io/simple-web-worker/">запуск виділеного worker</a>).</li>
<li><a href="https://github.com/mdn/simple-shared-worker">Основні приклади загалного worker </a>(<a href="http://mdn.github.io/simple-shared-worker/">запуск загального worker</a>).</li>
</ul>
<p>Ви можете знайти більше інформації як працюють ці демо у <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Використання web workers</a>.</p>
<h2 id="Специфікация">Специфікация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change from {{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>Basic support</td>
<td>4</td>
<td>{{CompatGeckoDesktop(1.9.1)}}</td>
<td>10.0</td>
<td>10.6</td>
<td>4</td>
</tr>
<tr>
<td>Shared workers</td>
<td>4</td>
<td>{{CompatGeckoDesktop(29)}}</td>
<td>{{CompatNo}}</td>
<td>10.6</td>
<td>4</td>
</tr>
<tr>
<td>Passing data using structured cloning</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 transferable objects</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>[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>Basic support</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>Shared workers</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>Passing data using structured cloning</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 transferable objects</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] As <code>webkitURL</code>.</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</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 interface</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">Functions and classes available to workers</a></li>
<li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
<li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li>
</ul>
|
