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
216
217
218
219
220
221
222
223
224
225
226
|
---
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>Los Web Workers</strong> hacen posible ejecutar la operación de un script en un hilo en segundo plano separado de la ejecución el hilo principal de la aplicación web. La ventaja de esto es que un proceso laborioso puede actuar en un hilo separado, permitiendo al hilo principal (normlamente la UI) ejecutarse sin ser bloqueado o ralentizado.</p>
<h2 id="Web_Workers_conceptos_y_uso">Web Workers conceptos y uso</h2>
<p>Un worker es un objeto que se crea a través del constructor ( {{domxref("Worker.Worker", "Worker()")}}) este ejecuta un archivo javascript — este fichero contiene los scripts que se van a ejecutan en el hilo del worker; los workers se ejecutan en un contexto global diferente al actual del navegador {{domxref("window")}}. Este contexto está representado por el objeto {{domxref("DedicatedWorkerGlobalScope")}} en el caso de los workers dedicados (los workers standard utilizan un solo script; y los shared workers usan {{domxref("SharedWorkerGlobalScope")}}).</p>
<p>Podemos ejecutar los script que necesitemos dentro del hilo del worker, pero con algunas excepciones. Por ejemplo no se puede manipular directamente el DOM, ni usar algunos métodos y propiedades por defecto del objeto {{domxref("window")}}. Pero puede usar un gran número de elementos que están dentro de <code>window</code>, incluyendo <a href="/en-US/docs/WebSockets">WebSockets</a>, y data storage formas de almacenamiento como <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> y solo en Firefox OS <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Mira <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Funciones y clases disponibles para workers</a> para saber más.</p>
<p>Los datos se comunican entre los workers y el hilo principal a través de un sistema de mensajes — tanto del hilo principal como del worker para enviar un mensaje se invoca al método <code>postMessage()</code> , y a través del listener del evento <code>onmessage</code> se pueden escuchar los mensajes (El mensaje está dentro de la propiedad <code>data</code> del evento) . Los datos se copian en lugar de compartirse.</p>
<p>Los workers también pueden generar nuevos workers, siempre que los workers estén en la misma página que el principal. Además, los workers pueden usar <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> para la network I/O, con la excepción de que los atributos <code>responseXML</code> y <code>channel</code> de <code>XMLHttpRequest</code> siempre retornan valor <code>null</code>.</p>
<p>Ademas de los workers dedicados, hay otro tipo de workers:</p>
<ul>
<li>Los Shared workers son workers que pueden ser utilizados por multiples scripts corriendo en diferenes ventanas, IFrames, etc., esto siempre que estén en el mismo dominio que el worker. Son un poco más complejos que los workers dedicados— los scripts deben comunicarse a través de un puerto activo. Mira {{domxref("SharedWorker")}} para mas detalles.</li>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> esencialmente actuan como servidores proxy que se ubican entre las aplicaciones web, el navegador y la red (cuando están disponibles). Están destinados (entre otras cosas) para poder manejar experiencias y comportamientos offline, interceptando peticiones de red y tomando la acción apropiada tomando en cuenta si la conexión está disponible y actualizando los assets desde el servidor. También notificaciones push y sincronización desde la API en segundo plano.</li>
<li>Chrome Workers es un worker solo de Firefox puedes utilizar si estás desarrollando complementos se puede tener acceso a <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> en el worker. Mira {{domxref("ChromeWorker")}} para mas detalles. </li>
<li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> nos dan la capacidad de procesar audio directamente dentro del contexto del worker.</li>
</ul>
<div class="note">
<p><strong>Note</strong>: Según el <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, los errores del worker no deberían bubujear (mira {{bug(1188141)}}. Esto está implementado en Firefox 42.</p>
</div>
<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2>
<dl>
<dt>{{domxref("AbstractWorker")}}</dt>
<dd>Abstrae todas las propiedades y métodos comunes a toda clase de workers (i.e. {{domxref("Worker")}} or {{domxref("SharedWorker")}}).</dd>
<dt>{{domxref("Worker")}}</dt>
<dd>Representa el hilo del worker en ejecución, pudiendo pasar mensajes a este.</dd>
<dt>{{domxref("WorkerLocation")}}</dt>
<dd>Define la ruta absoluta del script que ejecuta el <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a>.</dd>
</dl>
<dl>
<dt>{{domxref("SharedWorker")}}</dt>
<dd>Representa un tipo de worker al que se puede acceder desde distintos contextos de navegación, tanto de varias ventanas, iframes, y otros workers.</dd>
<dt>{{domxref("WorkerGlobalScope")}}</dt>
<dd>Representa el ámbito genérico de cualquier worker (similar a {{domxref("Window")}} en un contenido web normal). Los diferentes tipos de workers tienen objetos de ámbito que heredan de esta interfaz y añade características más específicas.</dd>
<dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
<dd>Representa el ámbito de un worker dedicado, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.</dd>
<dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
<dd>Representa el ámbito de un shared worke, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.</dd>
<dt>{{domxref("WorkerNavigator")}}</dt>
<dd>Representa la identidad y estado del user agent (El cliente):</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>Hemos creado un par de demostraciones para ver su uso básico:</p>
<ul>
<li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li>
<li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li>
</ul>
<p>You can find out more information on how these demos work in <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a>.</p>
<h2 id="Especificaciones">Especificaciones</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', '#workers')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>soporte básico</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</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>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(29)}}</td>
<td>{{CompatNo}}</td>
<td>10.6</td>
<td>4</td>
</tr>
<tr>
<td>Paso de datos usando structured cloning</td>
<td>13</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(8)}}</td>
<td>10.0</td>
<td>11.5</td>
<td>6</td>
</tr>
<tr>
<td>Paso de datos usando transferable objects</td>
<td>17 {{property_prefix("webkit")}}<br>
21</td>
<td>{{CompatNo}}</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>{{CompatVersionUnknown}}</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>Característica</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</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>Soporte básico</td>
<td>4.4</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</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>{{CompatNo}}</td>
<td>29</td>
<td>1.4</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Pasando datos usando structured cloning</td>
<td>{{CompatNo}}</td>
<td>4</td>
<td>{{CompatVersionUnknown}}</td>
<td>8</td>
<td>1.0.1</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Pasando datos usando transferable objects</td>
<td>{{CompatNo}}</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>
|
