Comparar revisiones

Usar web workers

Revisión 295693:

Revisión 295693 de ajimix el

Revisión 295696:

Revisión 295696 de ajimix el

Título:
Usar web workers
Usar web workers
Enlace amigable (slug):
Usar_web_workers
Usar_web_workers
Etiquetas:
"Gecko 1.9.1","Workers","Firefox 3.5","HTML5","JavaScript","para_revisar"
"Gecko 1.9.1","Workers","Firefox 3.5","HTML5","JavaScript","para_revisar"
Contenido:

Revisión 295693
Revisión 295696
n8      <span class="goog-gtc-unit" id="goog-gtc-unit-2"><span clasn8      {{ gecko_minversion_header ("1.9.2") }}
>s="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score- 
>98" dir="ltr">{{ gecko_minversion_header ("1.9.2") }}</span></spa 
>n> 
9    </p>
10    <p>9    </p>
11      <span class="goog-gtc-unit" id="goog-gtc-unit-3"><span clas
>s="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Workers c 
>onstituye un medio sencillo para que el contenido web ejecute sec 
>uencias de comandos en subprocesos en segundo plano.</span></span 
>>&nbsp; <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span cl 
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una vez 
> creado, un worker puede enviar mensajes a la tarea de generación 
> mediante la publicación de mensajes en un controlador de eventos 
> especificado por el creador.</span></span> 
12    </p>10    <p>
11      Workers constituye un medio sencillo para que el contenido 
 >web ejecute secuencias de comandos en subprocesos en segundo plan
 >o. Una vez creado, un worker puede enviar mensajes a la tarea de 
 >generación mediante la publicación de mensajes en un controlador 
 >de eventos especificado por el creador.
13    <p>12    </p>
14      <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span clas13    <p>
>s="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El subpro 
>ceso del worker puede realizar tareas sin interferir con la inter 
>faz de usuario.</span></span>&nbsp; <span class="goog-gtc-unit" i 
>d="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-f 
>rom-human" dir="ltr">Además, pueden realizar E / S utilizando</sp 
>an></span> <code><a class="internal" href="/en/XMLHttpRequest" ti 
>tle="En/XMLHttpRequest">XMLHttpRequest</a></code> <span class="go 
>og-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translata 
>ble goog-gtc-from-human" dir="ltr">(aunque los atributos <code>re 
>sponseXML</code> y <code>channel</code> siempre son nulos).</span 
>></span> 
14      El subproceso del worker puede realizar tareas sin interfer
 >ir con la interfaz de usuario.&nbsp; Además, pueden realizar E / 
 >S utilizando <code><a class="internal" href="/en/XMLHttpRequest" 
 >title="En/XMLHttpRequest">XMLHttpRequest</a></code> (aunque los a
 >tributos <code>responseXML</code> y <code>channel</code> siempre 
 >son nulos).
n17      <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span clasn17      <strong>Nota:</strong> como de costumbre, los subprocesos e
>s="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>N>n segundo plano, incluyendo los workers, no pueden manipular el D
>ota:</strong> como de costumbre, los subprocesos en segundo plano>OM.&nbsp; Si las acciones adoptadas por el subproceso en segundo 
>, incluyendo los workers, no pueden manipular el DOM.</span></spa>plano tienen que dar lugar a cambios en el DOM, deben enviar mens
>n>&nbsp; <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span c>ajes a sus creadores para hacer ese trabajo.
>lass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si las 
> acciones adoptadas por el subproceso en segundo plano tienen que 
> dar lugar a cambios en el DOM, deben enviar mensajes a sus cread 
>ores para hacer ese trabajo.</span></span> 
n20      <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span clasn20      Consulta el documento de referencia <a class="internal" hre
>s="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta >f="/En/DOM/Worker" title="En/DOM/Worker">Worker</a> , al que este
>el documento de referencia</span></span> <a class="internal" href> artículo complementa ofreciendo ejemplos y añadiendo detalles. P
>="/En/DOM/Worker" title="En/DOM/Worker">Worker</a> <span class="g>ara obtener una lista de funciones disponibles para workers, cons
>oog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translat>ulta <a href="/En/DOM/Worker/Functions_available_to_workers" titl
>able goog-gtc-from-human" dir="ltr">, al que este artículo comple>e="En/DOM/Worker/Functions available to workers">Funciones dispon
>menta ofreciendo ejemplos y añadiendo detalles.</span></span> <sp>ibles para workers</a> .
>an class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog- 
>gtc-translatable goog-gtc-from-human" dir="ltr">Para obtener una  
>lista de funciones disponibles para workers, consulta <a href="/E 
>n/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker 
>/Functions available to workers">Funciones disponibles para worke 
>rs</a> .</span></span> 
n23      <span class="goog-gtc-unit" id="goog-gtc-unit-11"><span clan23      Acerca de la seguridad en los subprocesos
>ss="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Acerca de l 
>a seguridad en los subprocesos</span></span> 
24    </h2>
25    <p>24    </h2>
26      <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span cla25    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La inter 
>faz <code>Worker</code> genera subprocesos a nivel del sistema op 
>erativo y la simultaneidad puede producir efectos interesantes en 
> el código si no tienes cuidado.</span></span> <span class="goog- 
>gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatabl 
>e goog-gtc-from-human" dir="ltr">Sin embargo, en el caso de web w 
>orkers, los puntos de comunicación controlados cuidadosamente con 
> otros subprocesos supone que en realidad sea muy difícil causar  
>problemas de simultaneidad.</span></span> &nbsp;<span class="goog 
>-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatab 
>le goog-gtc-from-human" dir="ltr">No hay acceso a componentes sin 
> subprocesos seguros o al DOM y tienes que pasar datos específico 
>s dentro y fuera de un subproceso a través de objetos serializado 
>s.</span></span> &nbsp;<span class="goog-gtc-unit" id="goog-gtc-u 
>nit-15"><span class="goog-gtc-translatable goog-gtc-from-human" d 
>ir="ltr">Así que te tienes que esforzar mucho para causar problem 
>as en el código.</span></span> 
26      La interfaz <code>Worker</code> genera subprocesos a nivel 
 >del sistema operativo y la simultaneidad puede producir efectos i
 >nteresantes en el código si no tienes cuidado. Sin embargo, en el
 > caso de web workers, los puntos de comunicación controlados cuid
 >adosamente con otros subprocesos supone que en realidad sea muy d
 >ifícil causar problemas de simultaneidad. &nbsp;No hay acceso a c
 >omponentes sin subprocesos seguros o al DOM y tienes que pasar da
 >tos específicos dentro y fuera de un subproceso a través de objet
 >os serializados. &nbsp;Así que te tienes que esforzar mucho para 
 >causar problemas en el código.
n29      <span class="goog-gtc-unit" id="goog-gtc-unit-16"><span clan29      Generar un worker
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Generar  
>un worker</span></span> 
30    </h2>
31    <p>30    </h2>
32      <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span cla31    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Crear un 
> nuevo worker es simple.</span></span>&nbsp; <span class="goog-gt 
>c-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable  
>goog-gtc-from-human" dir="ltr">Lo único que tienes que hacer es l 
>lamar al constructor <code>Worker()</code>, especificando el URI  
>de un script para ejecutar en el subproceso del worker y, si dese 
>as poder recibir las notificaciones del worker, establece la prop 
>iedad <code>onmessage</code> del worker a una función de manejado 
>r de evento adecuada.</span></span> 
32      Crear un nuevo worker es simple.&nbsp; Lo único que tienes 
 >que hacer es llamar al constructor <code>Worker()</code>, especif
 >icando el URI de un script para ejecutar en el subproceso del wor
 >ker y, si deseas poder recibir las notificaciones del worker, est
 >ablece la propiedad <code>onmessage</code> del worker a una funci
 >ón de manejador de evento adecuada.
n52      <span class="goog-gtc-unit" id="goog-gtc-unit-24"><span clan52      La línea 1 de este ejemplo crea e inicia el subproceso del 
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La línea>worker. La línea 2 establece el controlador <code>onmessage</code
> 1 de este ejemplo crea e inicia el subproceso del worker.</span>>> para el worker a una función que se llama cuando éste pide su p
></span>&nbsp; <span class="goog-gtc-unit" id="goog-gtc-unit-25"><>ropia función <code>postMessage()</code>.
>span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"> 
>La línea 2 establece el controlador <code>onmessage</code> para e 
>l worker a una función que se llama cuando éste pide su propia fu 
>nción <code>postMessage()</code>.</span></span> 
n58      <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span clan58      Generar subworkers
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Generar  
>subworkers</span></span> 
59    </h2>
60    <p>59    </h2>
61      <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span cla60    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los work 
>ers pueden generar más workers si así lo desean.</span></span>&nb 
>sp; <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class 
>="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los llamad 
>os subworkers deben estar alojados en el mismo origen que la pági 
>na principal.</span></span>&nbsp; <span class="goog-gtc-unit" id= 
>"goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-fr 
>om-human" dir="ltr">Además, los URI para los subworkers se resuel 
>ven en relación a la ubicación del worker principal y no en relac 
>ión a la de la página propietaria.</span></span>&nbsp; <span clas 
>s="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-tra 
>nslatable goog-gtc-from-human" dir="ltr">Esto hace que sea más fá 
>cil que los workers realicen un seguimiento de dónde están sus de 
>pendencias.</span></span> 
61      Los workers pueden generar más workers si así lo desean.&nb
 >sp; Los llamados subworkers deben estar alojados en el mismo orig
 >en que la página principal.&nbsp; Además, los URI para los subwor
 >kers se resuelven en relación a la ubicación del worker principal
 > y no en relación a la de la página propietaria.&nbsp; Esto hace 
 >que sea más fácil que los workers realicen un seguimiento de dónd
 >e están sus dependencias.
n64      <span class="goog-gtc-unit" id="goog-gtc-unit-31"><span clan64      Tiempos de espera e intervalos
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Tiempos  
>de espera e intervalos</span></span> 
65    </h2>
66    <p>65    </h2>
67      <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span cla
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los work 
>ers pueden utilizar los tiempos de espera y los intervalos al igu 
>al que el proceso principal.</span></span>&nbsp; <span class="goo 
>g-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translata 
>ble goog-gtc-from-human" dir="ltr">Esto puede ser útil, por ejemp 
>lo, si quieres hacer que tu subproceso del worker ejecute código  
>de manera periódica en lugar de ininterrumpidamente.</span></span 
>> 
68    </p>66    <p>
67      Los workers pueden utilizar los tiempos de espera y los int
 >ervalos al igual que el proceso principal.&nbsp; Esto puede ser ú
 >til, por ejemplo, si quieres hacer que tu subproceso del worker e
 >jecute código de manera periódica en lugar de ininterrumpidamente
 >.
69    <p>68    </p>
70      <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span cla69    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta 
></span></span> <a class="internal" href="/en/DOM/window.setTimeou 
>t" title="En/DOM/Window.setTimeout"><code>setTimeout()</code></a> 
>, <a class="internal" href="/en/DOM/window.clearTimeout" title="E 
>n/DOM/Window.clearTimeout"><code>clearTimeout()</code></a>, <a cl 
>ass="internal" href="/en/DOM/window.setInterval" title="En/DOM/Wi 
>ndow.setInterval"><code>setInterval()</code></a> y <a class="inte 
>rnal" href="/en/DOM/window.clearInterval" title="En/DOM/Window.cl 
>earInterval"><code>clearInterval()</code></a> <span class="goog-g 
>tc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable 
> goog-gtc-from-human" dir="ltr">si deseas tener más detalles.</sp 
>an></span> 
70      Consulta <a class="internal" href="/en/DOM/window.setTimeou
 >t" title="En/DOM/Window.setTimeout"><code>setTimeout()</code></a>
 >, <a class="internal" href="/en/DOM/window.clearTimeout" title="E
 >n/DOM/Window.clearTimeout"><code>clearTimeout()</code></a>, <a cl
 >ass="internal" href="/en/DOM/window.setInterval" title="En/DOM/Wi
 >ndow.setInterval"><code>setInterval()</code></a> y <a class="inte
 >rnal" href="/en/DOM/window.clearInterval" title="En/DOM/Window.cl
 >earInterval"><code>clearInterval()</code></a> si deseas tener más
 > detalles.
n73      <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span clan73      Terminar un worker
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Terminar 
> un worker</span></span> 
74    </h2>
75    <p>74    </h2>
76      <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span cla75    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si tiene 
>s que cancelar inmediatamente un worker que se está ejecutando, p 
>uedes hacerlo llamando al método <code>terminate()</code> del wor 
>ker:</span></span> 
76      Si tienes que cancelar inmediatamente un worker que se está
 > ejecutando, puedes hacerlo llamando al método <code>terminate()<
 >/code> del worker:
n82      <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span clan82      El subproceso del worker se interrumpe inmediatamente y sin
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El subpr> tener la posibilidad de terminar sus operaciones o limpiar por s
>oceso del worker se interrumpe inmediatamente y sin tener la posi>í mismo.
>bilidad de terminar sus operaciones o limpiar por sí mismo.</span 
>></span> 
83    </p>
84    <p>83    </p>
85      <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span cla84    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los work 
>ers pueden cerrarse llamando a su propio método</span></span> {{  
>ifmethod("nsIWorkerScope", "close") }}. 
85      Los workers pueden cerrarse llamando a su propio método {{ 
 >ifmethod("nsIWorkerScope", "close") }}.
n88      <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span clan88      Gestión de errores
>ss="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gestión de  
>errores</span></span> 
89    </h2>
90    <p>89    </h2>
91      <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span cla
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Cuando s 
>e produce un error de ejecución en el worker, es llamado su contr 
>olador de enventos <code>onerror</code>.</span></span>&nbsp; <spa 
>n class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-g 
>tc-translatable goog-gtc-from-human" dir="ltr">Recibe un evento d 
>enominado <code>error</code> que implementa la interfaz <code>Err 
>orEvent</code>.</span></span>&nbsp; <span class="goog-gtc-unit" i 
>d="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc- 
>from-human" dir="ltr">El evento no se lanza y se puede cancelar,  
>para evitar que la acción predeterminada tenga lugar, el worker p 
>uede llamar al método</span></span> <a class="internal" href="../ 
>../../../en/DOM/event.preventDefault" rel="internal"><code>preven 
>tDefault()</code></a> <span class="goog-gtc-unit" id="goog-gtc-un 
>it-43"><span class="goog-gtc-translatable goog-gtc-from-human" di 
>r="ltr">del evento de error.</span></span> 
92    </p>90    <p>
91      Cuando se produce un error de ejecución en el worker, es ll
 >amado su controlador de enventos <code>onerror</code>.&nbsp; Reci
 >be un evento denominado <code>error</code> que implementa la inte
 >rfaz <code>ErrorEvent</code>.&nbsp; El evento no se lanza y se pu
 >ede cancelar, para evitar que la acción predeterminada tenga luga
 >r, el worker puede llamar al método <a class="internal" href="../
 >../../../en/DOM/event.preventDefault" rel="internal"><code>preven
 >tDefault()</code></a> del evento de error.
93    <p>92    </p>
94      <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span cla93    <p>
>ss="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El evento d 
>e error tiene los siguientes tres campos que son de interés:</spa 
>n></span> 
94      El evento de error tiene los siguientes tres campos que son
 > de interés:
n101        <span class="goog-gtc-unit" id="goog-gtc-unit-45"><span cn101        Un mensaje de error legible para el ojo humano.
>lass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Un men 
>saje de error legible para el ojo humano.</span></span> 
n107        <span class="goog-gtc-unit" id="goog-gtc-unit-46"><span cn107        El nombre del archivo de script en el que se produjo el e
>lass="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nombre>rror.
> del archivo de script en el que se produjo el error.</span></spa 
>n> 
n113        <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span cn113        El número de línea del archivo de script en el que se pro
>lass="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El número>dujo el error.
> de línea del archivo de script en el que se produjo el error.</s 
>pan></span> 
n117      <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span clan117      Acceder al objeto navegador
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Acceder  
>al objeto navegador</span></span> 
118    </h2>
119    <p>118    </h2>
120      <span class="goog-gtc-unit" id="goog-gtc-unit-49"><span cla119    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los work 
>ers pueden acceder al objeto <code>navigator</code>, que está dis 
>ponible dentro de su ámbito.</span></span>&nbsp; <span class="goo 
>g-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translata 
>ble goog-gtc-from-human" dir="ltr">Contiene las siguientes cadena 
>s de texto que pueden usarse para identificar el navegador, tal y 
> como se puede hacer a partir de secuencias de comandos normales: 
></span></span> 
120      Los workers pueden acceder al objeto <code>navigator</code>
 >, que está disponible dentro de su ámbito.&nbsp; Contiene las sig
 >uientes cadenas de texto que pueden usarse para identificar el na
 >vegador, tal y como se puede hacer a partir de secuencias de coma
 >ndos normales:
n137      <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span clan137      Importar de secuencias de comandos y bibliotecas
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Importar 
> de secuencias de comandos y bibliotecas</span></span> 
138    </h2>
139    <p>138    </h2>
140      <span class="goog-gtc-unit" id="goog-gtc-unit-52"><span cla139    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los subp 
>rocesos de trabajo tienen acceso a una función global, importScri 
>pts (), que les permite importar secuencias de comandos de comand 
>os o bibliotecas dentro de su ámbito.</span></span>&nbsp; <span c 
>lass="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc- 
>translatable goog-gtc-from-human" dir="ltr">Acepta como parámetro 
>s cero o más URI de recursos para la importación, todos los ejemp 
>los siguientes son válidos:</span></span> 
140      Los subprocesos de trabajo tienen acceso a una función glob
 >al, importScripts (), que les permite importar secuencias de coma
 >ndos de comandos o bibliotecas dentro de su ámbito.&nbsp; Acepta 
 >como parámetros cero o más URI de recursos para la importación, t
 >odos los ejemplos siguientes son válidos:
n148      <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span clan148      Firefox carga cada secuencia de comandos de la lista, luego
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Firefox > los ejecuta para permitirles que se inicialicen ellos mismos.&nb
>carga cada secuencia de comandos de la lista, luego los ejecuta p>sp; Los objetos globales de cada secuencia de comandos pueden ent
>ara permitirles que se inicialicen ellos mismos.</span></span>&nb>onces ser utilizados por el worker.
>sp; <span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class 
>="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los objeto 
>s globales de cada secuencia de comandos pueden entonces ser util 
>izados por el worker.</span></span> 
n151      <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span clan151      <strong>Nota:</strong> los scripts pueden ser descargados e
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>>n cualquier orden, pero no se ejecutarán en el orden en que pasas
>Nota:</strong> los scripts pueden ser descargados en cualquier or> los nombres de archivo a <code>importScripts()</code> .&nbsp; Es
>den, pero no se ejecutarán en el orden en que pasas los nombres d>to se realiza de forma sincrónica; <code>importScripts()</code> n
>e archivo a <code>importScripts()</code> .</span></span>&nbsp; <s>o retorna hasta que todas las secuencias de comandos se han carga
>pan class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog>do y ejecutado.
>-gtc-translatable goog-gtc-from-mt" dir="ltr">Esto se realiza de  
>forma sincrónica; <code>importScripts()</code> no retorna hasta q 
>ue todas las secuencias de comandos se han cargado y ejecutado.</ 
>span></span> 
n157      <span class="goog-gtc-unit" id="goog-gtc-unit-61"><span clan157      Ejemplos
>ss="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score 
>-100" dir="ltr">Ejemplos</span></span> 
158    </h2>
159    <p>158    </h2>
160      <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span cla159    <p>
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esta sec 
>ción incluye varios ejemplos de cómo utilizar los DOM workers.</s 
>pan></span> 
160      Esta sección incluye varios ejemplos de cómo utilizar los D
 >OM workers.
n163      <span class="goog-gtc-unit" id="goog-gtc-unit-63"><span clan163      Realizar cálculos en segundo plano
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Realizar 
> cálculos en segundo plano</span></span> 
n166      <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span clan166      Una utilidad de los workers es permitir que tu código reali
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Una util>ce cálculos intensivos en el procesador sin bloquear el subproces
>idad de los workers es permitir que tu código realice cálculos in>o de interfaz de usuario.&nbsp; En este ejemplo, un worker se uti
>tensivos en el procesador sin bloquear el subproceso de interfaz >liza para calcular los números de Fibonacci.
>de usuario.</span></span>&nbsp; <span class="goog-gtc-unit" id="g 
>oog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from 
>-human" dir="ltr">En este ejemplo, un worker se utiliza para calc 
>ular los números de Fibonacci.</span></span> 
n169      <span class="goog-gtc-unit" id="goog-gtc-unit-66"><span clan169      El código JavaScript
>ss="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El código J 
>avaScript</span></span> 
n202      <span class="goog-gtc-unit" id="goog-gtc-unit-91"><span clan202      La función <code>onmessage</code> es llamada cuando el códi
>ss="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La funci>go HTML llamada al <code>postMessage()</code> en el worker.&nbsp;
>ón <code>onmessage</code> es llamada cuando el código HTML llamad> Esto inicia la recursividad, generando copias nuevas de sí mismo
>a al <code>postMessage()</code> en el worker.</span></span>&nbsp;> para controlar cada iteración del cálculo.
> <span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="g 
>oog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto inicia l 
>a recursividad, generando copias nuevas de sí mismo para controla 
>r cada iteración del cálculo.</span></span> 
n205      <span class="goog-gtc-unit" id="goog-gtc-unit-93"><span clan205      El código HTML
>ss="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El código H 
>TML</span></span> 
n236      <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span cln236      La página web crea un elemento <code>div</code> con el id. 
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La pági>de cliente <code>result</code> , que se utiliza para mostrar el r
>na web crea un elemento <code>div</code> con el id. de cliente <c>esultado, a continuación, genera el worker.&nbsp; Tras generar el
>ode>result</code> , que se utiliza para mostrar el resultado, a c> worker, el manejador<code>onmessage</code> está configurado para
>ontinuación, genera el worker.</span></span>&nbsp; <span class="g> mostrar los resultados mediante el ajuste de los contenidos del 
>oog-gtc-unit" id="goog-gtc-unit-115"><span class="goog-gtc-transl>elemento <code>div</code>, y el manejador <code>onerror</code> se
>atable goog-gtc-from-human" dir="ltr">Tras generar el worker, el > establece para <a href="/en/Debugging_JavaScript#dump()" title="
>manejador<code>onmessage</code> está configurado para mostrar los>en/Debugging JavaScript#dump()">volcar</a> el mensaje de error.
> resultados mediante el ajuste de los contenidos del elemento <co 
>de>div</code>, y el manejador <code>onerror</code> se establece p 
>ara <a href="/en/Debugging_JavaScript#dump()" title="en/Debugging 
> JavaScript#dump()">volcar</a> el mensaje de error.</span></span> 
237    </p>
238    <p>237    </p>
239      <span class="goog-gtc-unit" id="goog-gtc-unit-116"><span cl
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por últ 
>imo, se envía un mensaje al worker para iniciarlo.</span></span> 
240    </p>238    <p>
239      Por último, se envía un mensaje al worker para iniciarlo.
241    <p>240    </p>
242      <span class="goog-gtc-unit" id="goog-gtc-unit-117"><span cl241    <p>
>ass="goog-gtc-translatable goog-gtc-from-mt" dir="ltr"><a href="/ 
>samples/workers/fibonacci" title="samples/workers/fibonacci">Prue 
>ba este ejemplo</a> .</span></span> 
242      <a href="/samples/workers/fibonacci" title="samples/workers
 >/fibonacci">Prueba este ejemplo</a> .
n245      <span class="goog-gtc-unit" id="goog-gtc-unit-118"><span cln245      Realizar E / S de web en segundo plano
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Realiza 
>r E / S de web en segundo plano</span></span> 
n248      <span class="goog-gtc-unit" id="goog-gtc-unit-119"><span cln248      Puedes encontrar un ejemplo de esto en el artículo <a class
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Puedes >="internal" href="/En/Using_workers_in_extensions" title="En/Usin
>encontrar un ejemplo de esto en el artículo <a class="internal" h>g workers in extensions">Usar&nbsp; workers en las extensiones</a
>ref="/En/Using_workers_in_extensions" title="En/Using workers in >> .
>extensions">Usar&nbsp; workers en las extensiones</a> .</span></s 
>pan> 
n251      <span class="goog-gtc-unit" id="goog-gtc-unit-120"><span cln251      Dividir tareas entre varios workers
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Dividir 
> tareas entre varios workers</span></span> 
n254      <span class="goog-gtc-unit" id="goog-gtc-unit-121"><span cln254      A medida que los equipos con varios núcleos se hacen cada v
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">A medid>ez más frecuentes, resulta útil dividir las tareas&nbsp; compleja
>a que los equipos con varios núcleos se hacen cada vez más frecue>s, desde el punto de vista computacional, entre varios workers, q
>ntes, resulta útil dividir las tareas&nbsp; complejas, desde el p>ue a su vez pueden llevar a cabo esas tareas en núcleos de proces
>unto de vista computacional, entre varios workers, que a su vez p>ador múltiple.
>ueden llevar a cabo esas tareas en núcleos de procesador múltiple 
>.</span></span> 
255    </p>
256    <p>255    </p>
257      <span class="goog-gtc-unit" id="goog-gtc-unit-122"><span cl256    <p>
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">el ejem 
>plo se incluirá muy pronto</span></span> 
257      el ejemplo se incluirá muy pronto
n260      <span class="goog-gtc-unit" id="goog-gtc-unit-123"><span cln260      Crear workers desde dentro de los workers
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Crear w 
>orkers desde dentro de los workers</span></span> 
n263      <span class="goog-gtc-unit" id="goog-gtc-unit-124"><span cln263      El ejemplo de Fibonacci mostrado anteriormente demuestra qu
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El ejem>e los workers pueden, de hecho, generar más workers.&nbsp; Esto f
>plo de Fibonacci mostrado anteriormente demuestra que los workers>acilita crear rutinas repetitivas.
> pueden, de hecho, generar más workers.</span></span>&nbsp; <span 
> class="goog-gtc-unit" id="goog-gtc-unit-125"><span class="goog-g 
>tc-translatable goog-gtc-from-human" dir="ltr">Esto facilita crea 
>r rutinas repetitivas.</span></span> 
n266      <span class="goog-gtc-unit" id="goog-gtc-unit-126"><span cln266      Enviar objetos a los workers
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Enviar  
>objetos a los workers</span></span> 
n269      <span class="goog-gtc-unit" id="goog-gtc-unit-127"><span cln269      Puede pasar con seguridad los objetos dentro y fuera de los
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Puede p> workers que utilizan el método <code>postMessage()</code>, los o
>asar con seguridad los objetos dentro y fuera de los workers que >bjetos se convierten automáticamente en <a class="internal" href=
>utilizan el método <code>postMessage()</code>, los objetos se con>"/en/JSON" title="En/JSON">JSON</a> de manera interna.
>vierten automáticamente en</span></span> <a class="internal" href 
>="/en/JSON" title="En/JSON">JSON</a> <span class="goog-gtc-unit"  
>id="goog-gtc-unit-127"><span class="goog-gtc-translatable goog-gt 
>c-from-human" dir="ltr">de manera interna.</span></span> 
n277      <span class="goog-gtc-unit" id="goog-gtc-unit-131"><span cln277      <strong>Nota: los</strong> objetos que se introducen o se e
>ass="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>xtraer de los workers no deben contener funciones o referencias c
>>Nota: los</strong> objetos que se introducen o se extraer de los>íclicas, ya que JSON no es compatible con ellas.
> workers no deben contener funciones o referencias cíclicas, ya q 
>ue JSON no es compatible con ellas.</span></span> 
n279    <h2 id="Compatibilidad_del_navegador">n279    <p>
280      <span class="goog-gtc-unit" id="goog-gtc-unit-132"><span cl280      {{ CompatibilityTable() }}
>ass="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Compatibil 
>idad del navegador</span></span> 
281    </h2>281    </p>
282    <div id="compat-desktop">
282    <table class="standard-table">283      <table class="compat-table">
283      <tbody>284        <tbody>
284        <tr>285          <tr>
285          <th>286            <th>
286            <span class="goog-gtc-unit" id="goog-gtc-unit-133"><s287              Característica
>pan class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">N 
>avegador</span></span> 
287          </th>288            </th>
288          <th>289            <th>
289            <span class="goog-gtc-unit" id="goog-gtc-unit-134"><s290              Chrome
>pan class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">C 
>ompatibilidad básica</span></span> 
290          </th>291            </th>
291          <th>292            <th>
292            <span class="goog-gtc-unit" id="goog-gtc-unit-135"><s293              Firefox (Gecko)
>pan class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-t 
>m-score-100" dir="ltr">Notas</span></span> 
293          </th>294            </th>
295            <th>
296              Internet Explorer
297            </th>
298            <th>
299              Opera
300            </th>
301            <th>
302              Safari (WebKit)
303            </th>
294        </tr>304          </tr>
295        <tr>305          <tr>
296          <td>306            <td>
297            <span class="goog-gtc-unit" id="goog-gtc-unit-136"><s307              Workers dedicados
>pan class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-t 
>m-score-100" dir="ltr">Internet Explorer</span></span> 
298          </td>308            </td>
299          <td>309            <td>
300            <span class="goog-gtc-unit" id="goog-gtc-unit-137"><s310              3
>pan class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">---< 
>/span></span> 
301          </td>311            </td>
302          <td>312            <td>
303            &nbsp;313              3.5 (1.9.1)
304          </td>314            </td>
305        </tr>
306        <tr>
307          <td>315            <td>
308            <span class="goog-gtc-unit" id="goog-gtc-unit-138"><s316              10
>pan class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Fire 
>fox (Gecko)</span></span> 
309          </td>317            </td>
310          <td>318            <td>
311            <span class="goog-gtc-unit" id="goog-gtc-unit-139"><s319              10.60
>pan class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr"><str 
>ong>3.5</strong> (1.9.1)</span></span> 
312          </td>320            </td>
313          <td>321            <td>
314            &nbsp;322              4
315          </td>323            </td>
316        </tr>324          </tr>
317        <tr>325          <tr>
318          <td>326            <td>
319            <span class="goog-gtc-unit" id="goog-gtc-unit-140"><s327              Workers compartidos
>pan class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">O 
>pera</span></span> 
320          </td>328            </td>
321          <td>329            <td>
322            <span class="goog-gtc-unit" id="goog-gtc-unit-141"><s330              5
>pan class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">10.6 
>0</span></span> 
323          </td>331            </td>
324          <td>332            <td>
325            &nbsp;333              ---
326          </td>334            </td>
327        </tr>
328        <tr>
329          <td>335            <td>
330            <span class="goog-gtc-unit" id="goog-gtc-unit-142"><s336              ---
>pan class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">C 
>hrome</span></span> 
331          </td>337            </td>
332          <td>338            <td>
333            <span class="goog-gtc-unit" id="goog-gtc-unit-143"><s339              10.60
>pan class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">3</s 
>pan></span> 
334          </td>340            </td>
335          <td>341            <td>
336            &nbsp;342              5
337          </td>343            </td>
338        </tr>344          </tr>
339        <tr>345          <tr>
340          <td>346            <td>
341            <span class="goog-gtc-unit" id="goog-gtc-unit-144"><s347              Pasar datos usando <a href="/en/DOM/The_structured_
>pan class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-t>clone_algorithm" title="El algoritmo de clonación estructurada">c
>m-score-100" dir="ltr">Safari</span></span>>lonación estructurada</a>.&nbsp;
342          </td>348            </td>
343          <td>349            <td>
344            <span class="goog-gtc-unit" id="goog-gtc-unit-145"><s350              13
>pan class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-t 
>m-score-100" dir="ltr">4</span></span> 
345          </td>351            </td>
346          <td>352            <td>
347            &nbsp;353              8
348          </td>354            </td>
355            <td>
356              10
357            </td>
358            <td>
359              11.50
360            </td>
361            <td>
362              5.1
363            </td>
349        </tr>364          </tr>
365          <tr>
366            <td>
367              Pasar datos usando <a class="external" href="http:/
 >/dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-ob
 >jects" title="http://dev.w3.org/html5/spec/common-dom-interfaces.
 >html#transferable-objects">objetos transferiblestransferable obje
 >cts</a>
368            </td>
369            <td>
370              17 {{ property_prefix("webkit") }}
371            </td>
372            <td>
373              ---
374            </td>
375            <td>
376              ---
377            </td>
378            <td>
379              ---
380            </td>
381            <td>
382              ---
383            </td>
384          </tr>
350      </tbody>385        </tbody>
351    </table>386      </table>
387    </div>
388    <div id="compat-mobile">
389      <table class="compat-table">
390        <tbody>
391          <tr>
392            <th>
393              Característica
394            </th>
395            <th>
396              Android
397            </th>
398            <th>
399              Chrome for Android
400            </th>
401            <th>
402              Firefox Mobile (Gecko)
403            </th>
404            <th>
405              IE&nbsp;Phone
406            </th>
407            <th>
408              Opera Mobile
409            </th>
410            <th>
411              Safari Mobile
412            </th>
413          </tr>
414          <tr>
415            <td>
416              Workers dedicados
417            </td>
418            <td>
419              ---
420            </td>
421            <td>
422              0.16
423            </td>
424            <td>
425              ---
426            </td>
427            <td>
428              ---
429            </td>
430            <td>
431              11
432            </td>
433            <td>
434              5
435            </td>
436          </tr>
437          <tr>
438            <td>
439              Workers compartidos
440            </td>
441            <td>
442              ---
443            </td>
444            <td>
445              {{ CompatNo() }}
446            </td>
447            <td>
448              ---
449            </td>
450            <td>
451              ---
452            </td>
453            <td>
454              ---
455            </td>
456            <td>
457              ---
458            </td>
459          </tr>
460          <tr>
461            <td>
462              Pasar datos usando <a href="/en/DOM/The_structured_
 >clone_algorithm" title="El algoritmo de clonación estructurada">c
 >lonación estructurada</a>.&nbsp;
463            </td>
464            <td>
465              ---
466            </td>
467            <td>
468              0.16
469            </td>
470            <td>
471              ---
472            </td>
473            <td>
474              ---
475            </td>
476            <td>
477              ---
478            </td>
479            <td>
480              ---
481            </td>
482          </tr>
483        </tbody>
484      </table>
485    </div>
n353      <span class="goog-gtc-unit" id="goog-gtc-unit-146"><span cln487      Consulta también
>ass="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-scor 
>e-100" dir="ltr">Consulta también</span></span> 
nn490      <li>{{ spec("http://dev.w3.org/html5/workers/", "Especifica
 >ción API de ficheros: Web Workers", "ED") }}
356      <li>491      </li>
357        <code><a class="internal" href="/En/DOM/Worker" title="En
>/DOM/Worker">Worker</a></code> 
358      </li>492      <li>
493        <a class="internal" href="/En/DOM/Worker" title="En/DOM/W
 >orker">Worker</a> interface
359      <li>494      </li>
360        <code><a href="/En/DOM/WorkerGlobalScope" title="En/DOM/W
>orkerGlobalScope">WorkerGlobalScope</a></code> 
361      </li>495      <li>
362      <li>
363        <code><a class="internal" href="/En/DOM/SharedWorker" tit496        <a class="internal" href="/En/DOM/SharedWorker" title="En
>le="En/DOM/SharedWorker">SharedWorker</a></code>>/DOM/SharedWorker">SharedWorker</a> interface
tt500      </li>
501      <li>
502        <a class="external" href="http://www.html5rocks.com/en/tu
 >torials/workers/basics/#toc-enviornment-subworkers" title="http:/
 >/www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-
 >subworkers">HTML5Rocks - Lo básico sobre Web Workers</a>

Volver al historial