Paolo De Feo
a- a+

Script pesanti e blocco sito web: come evitare? La soluzione sono i Web Workers

Vediamo come evitare il blocco dei siti web, dovuto a script pesanti, grazie ai Web Workers.

I Web Workers sono delle API (Application Programming Interface) che permettono di eseguire script in background (di solito file JavaScript) senza incidere sulle prestazioni della pagina. In parole povere, i Web Workers intervengono quando vengono eseguite pesanti operazioni di caricamento in modo da permettere un passaggio dati più fluido, permettendo la continuazione delle operazioni di routine (navigazione, selezione ed altro).

L’implementazione dei Web Workwers in HTML5 prevede in prima battuta la creazione di un oggetto Worker al quale invieremo i dati usando il metodo postMessage. Per ricevere i dati sarà necessario riportare una funzione all’handler onmessage contenuta in una variabile incapsulata nel file JavaScript che farà da “sorgente”.

Esempio di codice JavaScript in una pagina HTML

Il codice in basso rappresenta un esempio JavaScript da implementare in un pagina HTML

(function () {
	var worker;
	function createWorker () {
		worker = new Worker("worker.js");
	}
	
	document.getElementById("start-worker").onclick = function () {
		createWorker();
		worker.postMessage(document.getElementById("worker-start-value").value);
		
		worker.onmessage = function (evt) {
			document.getElementById("worker-results").innerHTML = evt.data;
		};

		worker.onerror = function (evt) {
			document.getElementById("worker-results").innerHTML = "c’è stato un errore nell’esecuzione";
		};
	};
	
	document.getElementById("stop-worker").onclick = function () {
		if (worker) {
			worker.terminate();
		}
	};
})();

Il file JavaScript “worker.js”

Ora sarà necessario creare il codice da implementare nel file “worker.js”, ovvero l’elemento richiamato in HTML.

onmessage = function (evt) {
	
	for (var i=evt.data, il=1000001; i<il; i++) {
		
		postMessage(i);
	};
};

L’insieme degli script in alto crea un piccolo contatore. L’esecuzione di codice generato tramite metodo “Web Workers” è fruibile in tutti i browser di navigazione, ad eccezione di Internet Explorer.



Ti potrebbe interessare anche

commenta la notizia

C'Ŕ 1 commento
Staff
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!