Downloaded 41 times
Uploaded byTobias Pfeiffer
JavaScript Web Workers
The document discusses JavaScript web workers, which enable multi-threading in web applications by allowing separate threads for computation tasks without blocking the main thread. It explains the setup and usage of web workers, their limitations, and common use cases, such as handling large data and performing background I/O. Additionally, it emphasizes the importance of thread safety and the ease of utilizing web workers for efficient processing on modern multi-core systems.
JavaScript Web Workers
- 1.
- 2.
- 5. JavaScript Web Workers TobiasPfeiffer* @PragTob pragtob.wordpress.com
- 6. JavaScript Web Workers TobiasPfeiffer* @PragTob pragtob.wordpress.com *with contributions from Tobias Metzke
- 8.
- 9.
- 10. Not blocking the mainthread
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. „The Worker interfacespawns real OS-level threads, and concurrency can cause interesting effects in your code if you aren't careful. However, in the case of web workers, (...)it's actually very hard to cause concurrency problems. (...) So you have to work really hard to cause problems in your code.“ Mozilla Developer Network
- 24. Limitations ● Can notaccess the DOM ● High setup and memory cost ● Data may not contain functions or cycles ● Debugging
- 25.
- 26. Starting a webworker var worker = new Worker('worker_script.js');
- 27. Starting a webworker var worker = new Worker('worker/counter.js');
- 28. Listening to theworker var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ // do stuff });
- 29. Listening to theworker var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ $('#result').html(event.data); });
- 30. Sending the workermessages var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ $('#result').html(event.data); }); worker.postMessage(data);
- 31. Sending the workermessages var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ $('#result').html(event.data); }); worker.postMessage({});
- 32. The Worker var counter= 0; self.onmessage = function(message) { counter++; self.postMessage(counter); }
- 33. The Worker var counter= 0; self.onmessage = function(message) { counter++; self.postMessage(counter); }
- 34. The Worker var counter= 0; self.onmessage = function(message) { counter++; self.postMessage(counter); }
- 35. A Prime Numberworker findPrime = function(n) { for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) { return false; } } return n; } self.onmessage = function(event) { var num = parseInt(event.data); self.postMessage(findPrime(num); }
- 36. A Prime Numberworker findPrime = function(n) { for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) { return false; } } return n; } self.onmessage = function(event) { var num = parseInt(event.data); self.postMessage(findPrime(num); }
- 37. Importing Scripts ina worker importScripts('script_path.js');
- 38. Background I/O importScripts('io.js'); var timer; varsymbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
- 39. Background I/O importScripts('io.js'); var timer; varsymbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
- 40. Background I/O importScripts('io.js'); var timer; varsymbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
- 41. Background I/O importScripts('io.js'); var timer; varsymbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
- 42. Listening for errors worker.addEventListener('error',function(event){ // happy debugging });
- 43. Use Cases ● Expensivenon UI computations ● Handling big data ● Background I/O ● Ray Tracers ● AI ● … ● https://developer.mozilla.org/en-US/demos/tag/tech:webworkers/
- 44.
- 45. Actors ● Run intheir own thread ● Do not share state ● Communicate via asynchronous messages
- 47. Web Workers ● Usingmodern multi core computers on the client side ● Allow you to do the heavy lifting on the client side ● Relatively easy to use
- 48. Resources ● Web HypertextApplication Technology Working Group. HTML Specification - Web Workers.Website, 2013. http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html ● Mozilla Developer Network. Using Web Workers. Website, 2013. https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers ● MDN: Web Worker Demos https://developer.mozilla.org/en-US/demos/tag/tech:webworkers ● Visualization from the end (don't use actor and actor2, use the others) http://www.lively-kernel.org/repository/webwerkstatt/users/tmetzke/
- 49. Photo Credit ● CreativeCommonts Attribution: – http://www.w3.org/html/logo/downloads/HTML5_Logo.svg – http://www.flickr.com/photos/klearchos/5580186619/ – http://www.flickr.com/photos/tedmurphy/8482500187/ ● Creative Commons Attribution no derivative Works – http://www.flickr.com/photos/49333775@N00/2383975585/ – http://www.flickr.com/photos/adplayers/5758743751/ ● Creative Commons Attribution Share Alike – http://www.flickr.com/photos/amatuer_44060/2831112854/ ● Logos – https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-only/firefox_logo-only_RGB.png – http://de.wikipedia.org/wiki/Datei:Internet_Explorer_9.svg – https://en.wikipedia.org/wiki/File:Apple_Safari.png – http://commons.wikimedia.org/wiki/File:Opera_O.svg – ● Wikimedia Commons – http://en.wikipedia.org/wiki/File:Chromium_11_Logo.svg – http://en.wikipedia.org/wiki/File:Athlon64x2-6400plus.jpg
- 50. Photo Credit 2 ●Creative Commons Attribution-No Derivs – No Commercial – http://www.flickr.com/photos/cheesy42/8414666632/