CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Variables.
JavaScript Web Workers
-
Upload
tobias-pfeiffer -
Category
Technology
-
view
2.707 -
download
2
description
Transcript of JavaScript Web Workers
![Page 1: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/1.jpg)
Multicore?
![Page 2: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/2.jpg)
But isn'tthat hard?
![Page 5: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/5.jpg)
JavaScript Web Workers
Tobias Pfeiffer*@PragTob
pragtob.wordpress.com
![Page 6: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/6.jpg)
JavaScript Web Workers
Tobias Pfeiffer*@PragTob
pragtob.wordpress.com
*with contributions from Tobias Metzke
![Page 7: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/7.jpg)
![Page 8: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/8.jpg)
Multi-threaded
![Page 9: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/9.jpg)
Share nothing
![Page 10: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/10.jpg)
Not blocking themain thread
![Page 11: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/11.jpg)
Web Page
Create
![Page 12: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/12.jpg)
Web Page
![Page 13: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/13.jpg)
Web PageA
B
![Page 14: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/14.jpg)
Web PageA
B
Send Message
![Page 15: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/15.jpg)
Web PageA
B
Work
![Page 16: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/16.jpg)
Web PageA
B
Answer
![Page 17: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/17.jpg)
Web PageA
B
![Page 18: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/18.jpg)
Web PageA
B
![Page 19: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/19.jpg)
Web PageA
B
![Page 20: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/20.jpg)
What aboutthread safety?
![Page 21: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/21.jpg)
„The Worker interface spawns 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
![Page 22: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/22.jpg)
![Page 23: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/23.jpg)
![Page 24: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/24.jpg)
Limitations
● Can not access the DOM● High setup and memory cost● Data may not contain functions or cycles● Debugging
![Page 25: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/25.jpg)
Getting to work
![Page 26: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/26.jpg)
Starting a web worker
var worker = new Worker('worker_script.js');
![Page 27: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/27.jpg)
Starting a web worker
var worker = new Worker('worker/counter.js');
![Page 28: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/28.jpg)
Listening to the worker
var worker = new Worker('worker/counter.js');worker.addEventListener('message', function(event){ // do stuff});
![Page 29: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/29.jpg)
Listening to the worker
var worker = new Worker('worker/counter.js');worker.addEventListener('message', function(event){ $('#result').html(event.data);});
![Page 30: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/30.jpg)
Sending the worker messages
var worker = new Worker('worker/counter.js');worker.addEventListener('message', function(event){ $('#result').html(event.data);});worker.postMessage(data);
![Page 31: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/31.jpg)
Sending the worker messages
var worker = new Worker('worker/counter.js');worker.addEventListener('message', function(event){ $('#result').html(event.data);});worker.postMessage({});
![Page 32: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/32.jpg)
The Worker
var counter = 0;
self.onmessage = function(message) { counter++; self.postMessage(counter);}
![Page 33: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/33.jpg)
The Worker
var counter = 0;
self.onmessage = function(message) { counter++; self.postMessage(counter);}
![Page 34: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/34.jpg)
The Worker
var counter = 0;
self.onmessage = function(message) { counter++; self.postMessage(counter);}
![Page 35: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/35.jpg)
A Prime Number worker
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);}
![Page 36: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/36.jpg)
A Prime Number worker
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);}
![Page 37: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/37.jpg)
Importing Scripts in a worker
importScripts('script_path.js');
![Page 38: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/38.jpg)
Background I/O
importScripts('io.js');var timer;var symbol;function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000);}onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update();};
![Page 39: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/39.jpg)
Background I/O
importScripts('io.js');var timer;var symbol;function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000);}onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update();};
![Page 40: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/40.jpg)
Background I/O
importScripts('io.js');var timer;var symbol;function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000);}onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update();};
![Page 41: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/41.jpg)
Background I/O
importScripts('io.js');var timer;var symbol;function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000);}onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update();};
![Page 42: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/42.jpg)
Listening for errors
worker.addEventListener('error', function(event){ // happy debugging});
![Page 43: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/43.jpg)
Use Cases
● Expensive non UI computations● Handling big data● Background I/O● Ray Tracers● AI● …● https://developer.mozilla.org/en-US/demos/tag/tech:webworkers/
![Page 44: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/44.jpg)
Actors?
![Page 45: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/45.jpg)
Actors
● Run in their own thread● Do not share state● Communicate via asynchronous
messages
![Page 47: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/47.jpg)
Web Workers
● Using modern multi core computers on the client side
● Allow you to do the heavy lifting on the client side
● Relatively easy to use
![Page 48: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/48.jpg)
Resources● Web Hypertext Application 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 Demoshttps://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/
![Page 49: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/49.jpg)
Photo Credit● Creative Commonts 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
![Page 50: JavaScript Web Workers](https://reader034.fdocuments.us/reader034/viewer/2022052505/554ea12db4c905977e8b4621/html5/thumbnails/50.jpg)
Photo Credit 2● Creative Commons Attribution-No Derivs – No Commercial
– http://www.flickr.com/photos/cheesy42/8414666632/