AdNow

loading...

Trabajadores web HTML5

-

Trabajadores web HTML5

❮ AnteriorSiguiente ❯
Un trabajador web es un JavaScript que se ejecuta en segundo plano, sin afectar el rendimiento de la página.

¿Qué es un trabajador web?

Al ejecutar scripts en una página HTML, la página deja de responder hasta que finaliza el script.
Un trabajador web es un JavaScript que se ejecuta en segundo plano, independientemente de otros scripts, sin afectar el rendimiento de la página. Puede continuar haciendo lo que quiera: hacer clic, seleccionar cosas, etc., mientras el trabajador web se ejecuta en segundo plano.

Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente Web Workers.
API
Web Workers4.010.03.54.011.5

HTML Trabajadores Web Example

El siguiente ejemplo crea un trabajador web simple que cuenta los números en el fondo:

Ejemplo

Count numbers:
 
Pruebelo usted mismo »

Comprobar el soporte de Web Worker

Antes de crear un trabajador web, verifique si el navegador del usuario lo admite:
if (typeof(Worker) !== "undefined") {
    // Yes! Web worker support!    // Some code.....} else {
    // Sorry! No Web Worker support..}

Crear un archivo de trabajador web

Ahora, creemos nuestro trabajador web en un JavaScript externo.
Aquí, creamos un script que cuenta. La secuencia de comandos se almacena en el archivo "demo_workers.js":
var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();
La parte importante del código anterior es el método postMessage () , que se utiliza para publicar un mensaje en la página HTML.
Nota: Normalmente, los trabajadores web no se utilizan para scripts tan simples, sino para más tareas intensivas de CPU.

Crear un objeto de trabajador web

Ahora que tenemos el archivo de trabajador web, debemos llamarlo desde una página HTML.
Las siguientes líneas verifican si el trabajador ya existe, si no, crea un nuevo objeto de trabajador web y ejecuta el código en "demo_workers.js":
if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}
Entonces podemos enviar y recibir mensajes del trabajador web.
Agregue un oyente de eventos "onmessage" al trabajador web.
onmessage
Cuando el trabajador web publica un mensaje, se ejecuta el código dentro del detector de eventos. Los datos del trabajador web se almacenan en event.data.

Terminar un trabajador web

Cuando se crea un objeto de trabajador web, continuará escuchando los mensajes (incluso después de que el script externo haya finalizado) hasta que finalice.
Para finalizar un trabajador web y liberar recursos de navegador / computadora, use el método terminate ():
w.terminate();

Reutilizar al trabajador web

Si configura la variable de trabajador como no definida, una vez que se ha terminado, puede reutilizar el código:
w = undefined;

Código de ejemplo de trabajador web completo

Ya hemos visto el código Worker en el archivo .js. Debajo está el código para la página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}</script>

</body>
</html>
Pruebelo usted mismo »

Trabajadores web y el DOM

Como los trabajadores web están en archivos externos, no tienen acceso a los siguientes objetos de JavaScript:
  • El objeto ventana
  • El objeto del documento
  • El objeto principal

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la séptima línea de
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente, una pági
Leer más

Visitas a este blog