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
|
---
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> são mecanismos que permitem que uma operação de um dado script seja executado em uma thread diferente da thread principal da aplicação Web. Permitindo que cálculos laboriosos sejam processados sem que ocorra bloqueio da thread principal (geralmente associado à interface).</p>
<p> </p>
<h2 id="Web_Workers_conceitos_e_uso">Web Workers: conceitos e uso</h2>
<p>Um "worker" é um objeto criado através da utilização do construtor (ex {{domxref("Worker.Worker", "Worker()")}}) que executa um dado arquivo Javascript — o código contido em tal arquivo é executado no thread do worker; e tais workers são executados em um contexto diferente do principal {{domxref("window")}}. O contexto dos workers é representado pelo objeto {{domxref("DedicatedWorkerGlobalScope")}} no caso de workers dedicados (workers padrões são utilizados por um único script; workers compartilhados utilizam {{domxref("SharedWorkerGlobalScope")}}).</p>
<p>O thread do worker roda qualquer trecho de código, mas é importante ressaltar que esse trecho não poderá manipular o DOM, ou usar alguns métodos e propriedades do objeto {{domxref("window")}}. Mas, é permitido usar um grande número de itens fornecidos pelo objeto window, incluindo <a href="/en-US/docs/WebSockets">WebSockets</a>, mecanismos de data storage tais como <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>. Para mais detalhes veja <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Funções e classes disponíveis para os workers</a>.</p>
<p>O thread principal e os threads dos workers comunicam-se entre si enviando dados através do sistema de mensagens — ambos os lados enviam mensagens usando o método <code>postMessage()</code>, e respondem as mensagens via o manipulador de eventos <code>onmessage</code> (a mensagem está contida no atributo <code>data</code> do evento {{event("Message")}}). É importante ressaltar que os dados são copiados, e não compartilhados.</p>
<p>Workers podem, por sua vez, gerar novos workers, desde que esses workers sejam hospedados na mesma origem que a página principal. Além disso, workers podem usar <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code> para network I/O, com a exceção de que os atributos <code>responseXML</code> e <code>channel</code> do <code>XMLHttpRequest</code> sempre retornam nulo.</p>
<p>Além dos workers dedicados, existem outros tipos de workers:</p>
<ul>
<li>Shared Workers são workers que podem ser utilizados por diversos scripts que estão sendo executados em diferentes janelas, IFrames, etc., desde que eles estejam no mesmo domínio. Eles são ligeiramente mais complexos que workers dedicados — os scripts se comunicam através de uma porta ativa. Veja {{domxref("SharedWorker")}} para mais detalhes.</li>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> essencialmente atuam como servidores proxy enquadram entre aplicativos da web e o navegador e a rede (quando disponível). Eles destinam-se (entre outras coisas) a habilitar a criação de experiências off-line efetivas, interceptando solicitações de rede e tomando as ações adequadas com base na disponibilidade da rede e atualização de ativos no servidor. Eles também permitirão o acesso a notificações push e APIs de sincronização em background.</li>
<li>Chrome Workers são um Firefox-only tipo de worker que você pode usar caso esteja desenvolvendo um add-ons e quer usar workers em extensão e ter acesso a <a href="https://developer.mozilla.org/en/js-ctypes" title="en/js-ctypes">js-ctypes</a> na sua worker. Veja {{domxref("ChromeWorker")}} para mais detalhes. </li>
<li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> fornecem a capacidade de processamento de áudio direcionado direto para ser feito dentro do contexto de um web worker.</li>
</ul>
<h2 id="Interfaces_Web_Worker">Interfaces Web Worker</h2>
<dl>
<dt>{{domxref("AbstractWorker")}}</dt>
<dd>Propriedades Abstratas e métodos comuns a todos tipos de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).</dd>
<dt>{{domxref("Worker")}}</dt>
<dd>Representa a worker thread em execução, permitindo que você passe mensagens para o código em execução.</dd>
<dt>{{domxref("SharedWorker")}}</dt>
<dd>Representa um tipo específico de worker que pode ser <em>acessado </em>a partir de vários contextos de navegação, sendo várias janelas, iframes ou mesmo workers.</dd>
<dt>{{domxref("WorkerGlobalScope")}}</dt>
<dd>Representa o escopo genérico de qualquer worker (fazendo o mesmo trabalho como {{domxref("Window")}} para conteúdo normal da web). Diferentes tipos de workers têm objetos de escopo que herdam desta interface e adicionam recursos mais específicos.</dd>
<dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
<dd>Representa o escopo de um dedicated worker, herdado de {{domxref("WorkerGlobalScope")}} e adicionam recursos mais específicos.</dd>
<dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
<dd>Representa o escopo de um shared worker, herdado de {{domxref("WorkerGlobalScope")}} e adicionam recursos mais específicos.</dd>
<dt>{{domxref("WorkerNavigator")}}</dt>
<dd>Representa a identidade e estado do user agent (o cliente):</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Criamos algumas demonstrações simples para mostrar o uso básico:</p>
<ul>
<li><a href="https://github.com/mdn/simple-web-worker">Exemplo básico de dedicated worker</a> (<a href="http://mdn.github.io/simple-web-worker/">executar dedicated worker</a>).</li>
<li><a href="https://github.com/mdn/simple-shared-worker">Exemplo básico de shared worker</a> (<a href="http://mdn.github.io/simple-shared-worker/">executar shared worker</a>).</li>
</ul>
<p>Você pode descobrir mais informações sobre como essas demonstrações funcionam em <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Usando web workers</a>.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</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="Compatibilidade_do_navegador">Compatibilidade do navegador</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 [1]<br>
23</td>
<td>{{CompatGeckoDesktop(21)}}</td>
<td>11</td>
<td>15</td>
<td>6 [2]</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome Mobile</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>{{CompatGeckoDesktop(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][2] Como em <code>webkitURL</code>.</p>
<h2 id="Veja_também">Veja também</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>: para usar workers em código privilegiado/chrome.</li>
</ul>
|
