Trabajadores web HTML 5

trabajador web es un JavaScript que se ejecuta en segundo plano y no afecta el rendimiento de la página.

¿Qué es un Trabajador Web?

Cuando se ejecuta la secuencia de comandos en la página HTML, el estado de la página no responde hasta que el script se ha completado.

trabajador web es un JavaScript que se ejecuta en segundo plano, independiente de otras secuencias de comandos no afecta al rendimiento de la página.

Puede continuar a hacer nada dispuesto a hacer: Haga clic para seleccionar el contenido, etc., en un momento en carreras trabajador web en el fondo.

¿Quieres saber más se puede aprender el mecanismo de funcionamiento JavaScript asíncrono síncrono.

Detección Web de Apoyo al Trabajador

Antes de crear un trabajador web, por favor detectar navegador es compatible del usuario:

if (typeof (Worker) !== "undefined") {
	console.log('支持Web worker 功能')
}
else {
	console.log('Sorry')
}

Crear un archivo de trabajador web

Ahora, vamos a crear nuestra web trabajador en un JavaScript externo.

Aquí, hemos creado una cuenta de guión. La secuencia de comandos se guarda en el archivo "demo_workers.js":

demo_workers.js Fuente:

var i=0;

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

timedCount();

postMessage () método - que se utiliza para devolver un poco de noticias página HTML.

trabajador web es más comúnmente utilizado para las tareas consumen recursos de la CPU.

código de ejemplo Web Worker

<!DOCTYPE html>
<html>

<body>

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

    <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";
            }
        }

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

</body>

</html>

capturas de pantalla de efecto

imagen-20200404181102232

problemas de la experiencia

navegadores de Google y Firefox aparecen

imagen-20200404181259524

Google lanza una excepción cannot be accessed from origin 'null'.no se puede acceder desde el origen "nulo"

Encontrar información sobre las razones por las que la seguridad del explorador Google no causó que se pueden ejecutar directamente en un local, será tratado como un acceso a varios dominios.

En otro navegador IE lata.

Trabajadores web 和 DOM

A medida que el trabajador web se encuentra en un archivo externo, no pueden acceder al objeto JavaScript siguiente ejemplo:

objeto de la ventana
El objeto del documento
objetos padre

HTML5 (八) Web Workers