HTML5 Webworkers: threading in Javascript

Christian Peeters
·
08/11/2011

Met de komst van HTML5 is de performance van Javascript erg belangrijk geworden. De browser fabrikanten hebben de laatste jaren dan ook flink ingezet op het optimaliseren van hun Javascript-engines. Echter, voor de user experience is niet alleen de snelheid van belang, maar ook hoe de Javascript commando’s worden uitgevoerd. Webworkers vormen een nieuw en belangrijk onderdeel van Javascipt om ervoor te zorgen dat de User Interface goed blijft reageren. Met de komst van HTML5 is de performance van Javascript erg belangrijk geworden. De browser fabrikanten hebben de laatste jaren dan ook flink ingezet op het optimaliseren van hun Javascript-engines. Echter, voor de user experience is niet alleen de snelheid van belang, maar ook hoe de Javascript commando’s worden uitgevoerd. Webworkers vormen een nieuw en belangrijk onderdeel van Javascipt om ervoor te zorgen dat de User Interface goed blijft reageren. UI thread Javascript is in moderne browsers vele malen sneller dan voorheen, maar het blijft toch mogelijk dat de berekeningen die gedaan worden er voor zorgen dat de user-intface niet, of niet goed meer reageert. Normaal worden alle Javascript handelingen op 1 thread uitgevoerd. Code die op gebruikers interactie reageert en andere -lang durende- berekeningen zullen op elkaar moeten wachten. Bijvoorbeeld het uitklappen van een submenu zou kunnen vertragen als er op dat moment javascipt bezig is met een langere berekening. In een dergelijke situatie is een halve seconde storend, maar nog wel te overzien. Mocht je bijvoorbeeld met Javascript tekenen op het HTML5 Canvas dan is meer dan 30ms al een probleem. We willen dus voorkomen dat de UI-thread -user interface thread- geblokkeerd wordt door een te lang durende berekening. En Webworkers zijn hiervoor de oplossing. Het is niet 100% hetzelfde als multi-threading, maar kan wel hiermee vergeleken worden. En nog meer goed nieuws: het is nog redelijk simpel ook! Het aanmaken van een webworker Een webworker is een Javascript bestand dat wordt geladen en uitgevoerd op de achtergrond. Het communiceren tussen de UI-thread en de Webworker gaat via “messages”. Het ceëeren van een webworker gaat alsvolgt: var theWorker = new Worker-‘ worker.js’-; De webworker wordt opgestart door er een bericht naar toe te sturen: theWorker.postMessage–; In het ‘worker.js’ bestand staan minimaal een event-handler die bepaald wat er moet gebeuren als de webworker een bericht ontvangt: onmessage = function -e- { // hier de implementatie van de webworker // Gebruik eventueel e.data }

Bij Master IT leer je alleen wat je echt nodig hebt.
Certificeringen Trainingen
Beste lesmethode
Kleine klassen
Flexibel inplannen
Leer wat jij nodig hebt
Gerelateerde trainingen