1. WEB WORKERS 1 Amitesh Madhur (amitesh@yahoo-inc.com) (Exceptional Performance, Bangalore)

2. 2 JavaScript should not execute for longer than 100 milliseconds to ensure responsive UI. My recommendation, though, is to keep JavaScript under 50 milliseconds at a time, because why even try to get close to that? - Nicholas Zakas Why Web Workers?

3. 3 What is Web Worker? worker.postMessage(obj || str) MAIN PAGE serialize unserialize Heavy Computation Format Data self.postMessage(obj || str) serialize unserialize

4. Without Web Workers With Web Workers What are Web Workers Worker Environment Subworkers/Delegation Inline Worker Restrictions Browser Support Use cases Demo AGENDA 4

5. Without Web Workers 5 Chrome Internet Explorer Firefox

6. With Web Workers 6 Chrome Internet Explorer Firefox

7. What are Web Workers? Scripts running in background. Heavy Weight Scripts. 7

8. What are Web Workers? 8 // create web worker self.postMessage(arrayOfRandomNum); worker.postMessage({‘cmd’:gen_num}); self.onmessage = fn(e){} worker.onerror = fn(e){ // e.lineno // e.filename // e.message } // task completed worker.onmessage = fn(e){ // update DOM with e.data } myworker.js worker.terminate();

9. Difference from other approach. How different from setTimeout? How different from AJAX? 9

10. So what does Worker look like? 10 // Check if workers are supported. if (typeof(Worker) == "undefined") { document.getElementById(‘support’).textContent = ‘Your browser does not support Web Workers’; return false; } // worker object var worker = new Worker('worker.js'); // post message to worker worker.postMessage(‘Are you there?’); // error handling worker.onerror = function(event){ console.log(event.message + ‘ in file = ’ + event.filename + ‘ at line #’ + event.lineno ); }; // on message handler worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; } Main Page 1 2 3 4 5

11. So what does Worker look like? 11 self.onmessage = function(event){ postMessage(event.data + ‘ Worker says: Yes I am here.’); } OR self.addEventListener('message', function(e) { self.postMessage(event.data +‘ Worker says: Yes I am here.’); }, false); worker.js 2 1

12. Worker Environment 12 No BOM No DOM !parent setTimeout, setInterval navigator object location object (read-only) XMLHttpRequest Spawning other web workers

13. Subworker/Delegation 13 Ability to spawn child workers – Breaks up huge task into smaller chunks Sub workers should be in hosted in the same domain Location of sub worker file is relative to parent worker (and not main page).

14. Subworker/Delegation 14 self.onmessage = function(event){ var num_workers = 4; // total sub workers var pending_workers = num_workers; // loop though the sub-workers for (var i = 0; i < num_workers; i++) { var worker = new Worker('subworker.js'); worker.postMessage(event.data); // on message worker.onmessage = function(event) { var str += event.data; // collect data pending_workers -= 1; // workers pending // case: all response collected then post to main page if (pending_workers == 0) self.postMessage(str); } // on message sub-worker end } // loop end } Parent Worker 1 2 3 4

15. Subworker/Delegation 15 onmessage = function(event){ postMessage(event.data + ‘ Sub Worker says: Yes I am here.’); } subworker.js

16. Inline worker 16 Worker script on the fly – Without creating separate worker file BlobBuilder interface

17. Inline worker 17 Worker script on the fly – Without creating separate worker file BlobBuilder interface var bb = new BlobBuilder(); bb.append("onmessage = function(e) { postMessage('msg from worker'); }"); var blobURL = window.URL.createObjectURL(bb.getBlob()); var worker = new Worker(blobURL); worker.postMessage('Hello'); // post message to start worker // on message worker.onmessage = function(e) { // e.data == 'msg from worker' };

18. Restrictions 18 !file:// (chrome) http: | https: && data: | javascript:

19. Browser Support 19 3.5+ 4.0+ 10.6+ ✔ ✔ ✔ ✔ X

20. Use Cases 20 Prefetching and/or caching data for later use Code syntax highlighting or other real-time text formatting Spell checker Background I/O or polling of webservices Processing large arrays or JSON responses

21. DEMO 21