Dall'archivio script > HTML5

Usare i Web Workers per eseguire uno script in background

di Andrea ColaciAndrea Colaci,

I Web Workers consentono di eseguire degli script intensivi in un thread separato, mantenendo la pagina reattiva e senza blocchi, come contrariamente avverrebbe con uno script "convenzionale".
Qualsiasi script che abbia un "costo" di startup ed una durata rilevanti, risulta un ottimo candidato nell'adozione di questa API introdotta da HTML5.

L'utilizzo è abbastanza semplice: occorre innanzitutto creare uno script separato, contenente la funzione/task da eseguire in background e avendo cura di dichiarare un event handler onmessage che fungerà da "entry point" per l'elaborazione. Lato codice chiamante, tipicamente nella pagina, è necessario istanziare uno oggetto Worker passando nel costruttore il nome dello script, quindi specificare un event handler per ricevere i messaggi dal worker e gestirne le successive operazioni, ad esempio, la presentazione dei risultati ottenuti.

WebWorkersDemo.html
<!DOCTYPE html>
<html>
<head>
    <title>Web Workers</title>
</head>
<body>
    <p>        Risultato:
        <output id="statusText">...</output></p>
    <script type="text/javascript">

        function log(msg) {

            var message = document.getElementById("statusText");
            message.innerHTML = message.innerHTML + "</br>" + msg;
        }

        //Controllo se i Web Workers sono supportati
        if (typeof (Worker) !== "undefined")
            doWork();
        else
            alert('non supportato');

        function doWork() {

            log("avvio elaborazione worker...");

            //Creazione worker
            var wrk = new Worker("worker.js");
            
            //Impo
            wrk.onmessage = function (event) {
                log(event.data);
            };
            
            wrk.postMessage("go!");

            log("main thread libero.");
        }
    </script>
</body>
</html>

Il codice del worker, a titolo di esempio, esegue un ciclo per reperire dei dati mediante XMLHttpRequest, richiamando il metodo postMessage ogni volta che occorre comunicare con il chiamante, in questo caso lo script nella pagina.

worker.js
onmessage = function (event) {

    postMessage("Worker - ricevuto messaggio: " + event.data);

    var n = 10;

    for (var i = n; i > 0; i -= 1) {

        var client = new XMLHttpRequest();

        client.onreadystatechange = function () {
            if (this.readyState == this.DONE)
                postMessage("Operazione effettuata");
        }

        client.open("GET", "veryBigData.xml");
        client.send();

    }

    postMessage("Worker - elaborazione terminata.");

};

La specifica completa è disponibile qui: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi