webworkers
zet javascript flink aan het werk zonder dat jouw pagina vertraagt of blokkeert

home | index | menu | help

Er is geen CSS ondersteuning.

WEBWORKERS

		
		

		
		

Webworkers zijn handig als je grote stukken javascript wilt uitvoeren zonder dat jouw pagina vertraging oploopt. De javascript-code wordt "in de achtergrond" uitgevoerd en alleen als de procedure "iets te melden heeft" wordt dat op de pagina getoond. Je kan niet de fuctionaliteit van jouw website er van af laten hangen. Internet Explorer doet niet mee (tot nu toe) aan het web-worker-gebeuren. Het is dus verstandiger om webworkers te gebruiken om iets extra's toe te voegen aan de pagina voor de bezoekers die goede browsers hebben (progressive enhancement).

Het voorbeeld geeft aan hoe je een webworker kan gebruiken. Een klein stukje javascript (in de head) start de worker, en in hetzelfde stukje script staan 2 regeltjes die "luisteren" naar de webworker en die de melding(en) aan een id "knopen". In dit voorbeeld is dat het id "laatzien" wat door middel van getElementById aan een p-tag gekoppeld wordt. Zie de code hieronder.

<script type="text/javascript">
	function webwerker(){
		var werker = new Worker('werker.js');
		werker.onmessage = function (event) {
		document.getElementById('laatzien').textContent = event.data;};}
</script>
		

Het stukje script verwijst naar de javascript-module "werker.js". De inhoud van die file spreekt voor zichzelf. Elke 1000 milli-seconde wordt er een tellertje verlaagd en als de teller bij één is aangeland wordt de mededeling "klaar" op het scherm gezet. De worker doet dit geheel zelfstandig. Je moet er wel rekening mee houden dat de worker niet rechtsstreeks aan de DOM kan "werken". Je kan er dus niet een kleurtje op de pagina mee veranderen of zoiets. Maar hele zware berekeningen die anders jouw pagina super-traag hadden gemaakt kunnen nu zonder problemen worden uitgevoerd (in de achtergrond). Een klein voorbeeld van de code in de worker staat hieronder.

var boodschap,n;
function doe_overbodige_dingen(mseconde){
	var date=new Date();
	var vandaag=null;
	do{vandaag=new Date();}
	while(vandaag-date<mseconde);} 
		n=20;
		werk: while (true) {
			doe_overbodige_dingen(1000);
			if(n>1){boodschap="en dit is "+n;}
			else{boodschap="ALLES IS KLAAR...";}
			postMessage(boodschap);
			n--;
			if(n===0){break;}
			continue werk;}	
		

cache 02-10-2010