var worker = new Worker(‘MyWork.js');<br />worker.addEventListener('message', function(e) {<br />document.getElementById(‘...
for(;;;)<br />{<br />	// Perceived performance of the UI<br />}<br />2<br />Why Web Workers?<br />JavaScript should not ex...
3<br />What is Web Worker?<br />serialize<br />unserialize<br />worker.postMessage(obj || str)<br />HeavyComputation<br />...
Without Web Workers<br />With Web Workers<br />What are Web Workers<br />Worker Environment<br />Subworkers/Delegation<br ...
Without Web Workers<br />5<br />Chrome<br />Internet Explorer<br />Firefox<br />
With Web Workers<br />6<br />Chrome<br />Internet Explorer<br />Firefox<br />
What are Web Workers?<br />Scripts running in background.<br />Heavy Weight Scripts. <br />7<br />
What are Web Workers?<br />8<br />myworker.js<br />// create web worker<br />worker.postMessage({‘cmd’:gen_num});<br />sel...
Difference from other approach.<br />How different from setTimeout?<br />How different from AJAX?<br />9<br />
So what does Worker look like?<br />10<br />Main Page<br />// Check if workers are supported.<br />if (typeof(Worker) == "...
So what does Worker look like?<br />11<br />worker.js<br />self.onmessage = function(event){<br />postMessage(event.data +...
Worker Environment<br />12<br />No BOM<br />No DOM<br />!parent<br /><ul><li>setTimeout, setInterval
navigator object
location object (read-only)
XMLHttpRequest
Spawning other web workers</li></li></ul><li>Subworker/Delegation<br />13<br />Ability to spawn child workers<br />Breaks ...
Subworker/Delegation<br />14<br />Parent Worker<br />self.onmessage = function(event){<br />varnum_workers = 4; // total s...
Subworker/Delegation<br />15<br />subworker.js<br />onmessage = function(event){<br />postMessage(event.data + ‘ Sub Worke...
Inline worker<br />16<br />Worker script on the fly <br />Without creating separate worker file<br />BlobBuilder interface...
Inline worker<br />17<br />Worker script on the fly <br />Without creating separate worker file<br />BlobBuilder interface...
Restrictions<br />18<br />!file:// (chrome)<br />http: | https: && data: | javascript:<br />
Upcoming SlideShare
Loading in …5
×

Amitesh Madhur - Web workers, HTML 5

3,207 views

Published on

Amitesh threads the needle of Web Workers.

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
3,207
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
15
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Workers can delegate task to sub workers. For example, if a worker is performing very intensive task of updating 10,00,000 of records in database, it can spawn, let’s say , 10 sub workers and delegate a chunk of work to each one of these. These workers will run in parallel to perform the task given to them.
  • If a worker need not be present in a separate javascript file, it can be created inline to the main script.
  • Worker is supported in Firefox 3.5 and above, Chrome 4.0 and above, Safari 4.0 and above, Opera 10.6 and above. Workers are not supported in Internet Explorer.
  • So what kind app would utilize web workers? Unfortunately, web workers are still relatively new and the majority of samples/tutorials out there involve computing prime numbers. Although that isn&apos;t very interesting, it&apos;s useful for understanding the concepts of web workers. Here are a few more ideas to get your brain churning:Prefetching and/or caching data for later useCode syntax highlighting or other real-time text formattingSpell checkerAnalyzing video or audio dataBackground I/O or polling of webservicesProcessing large arrays or humungous JSON responsesImage filtering in &lt;canvas&gt;Updating many rows of a local web database
  • Amitesh Madhur - Web workers, HTML 5

    1. 1. var worker = new Worker(‘MyWork.js');<br />worker.addEventListener('message', function(e) {<br />document.getElementById(‘heading').textContent(e.data);}, false);<br />worker.postMessage(‘WEB WORKERS'); <br />WEB WORKERS<br />1<br />Amitesh Madhur (amitesh@yahoo-inc.com)(Exceptional Performance, Bangalore)<br />onmessage = function(e) {<br />postMessage(e.data);<br />}<br />
    2. 2. for(;;;)<br />{<br /> // Perceived performance of the UI<br />}<br />2<br />Why Web Workers?<br />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?<br /> - Nicholas Zakas<br />UI Blocked for 100 milliseconds == Perceived performance page is slow50 milliseconds….<br />
    3. 3. 3<br />What is Web Worker?<br />serialize<br />unserialize<br />worker.postMessage(obj || str)<br />HeavyComputation<br />FormatData<br />MAIN PAGE<br />MAIN PAGE<br />self.postMessage(obj || str)<br />MAIN PAGE<br />serialize<br />unserialize<br />
    4. 4. Without Web Workers<br />With Web Workers<br />What are Web Workers<br />Worker Environment<br />Subworkers/Delegation<br />Inline Worker<br />Restrictions<br />Browser Support<br />Use cases<br />Demo<br />AGENDA<br />4<br />onmessage = fn{}<br />setTimeout();<br />worker.postMessage('Hello World');<br />worker.postMessage(obj);self.postMessage(e.data);<br />
    5. 5. Without Web Workers<br />5<br />Chrome<br />Internet Explorer<br />Firefox<br />
    6. 6. With Web Workers<br />6<br />Chrome<br />Internet Explorer<br />Firefox<br />
    7. 7. What are Web Workers?<br />Scripts running in background.<br />Heavy Weight Scripts. <br />7<br />
    8. 8. What are Web Workers?<br />8<br />myworker.js<br />// create web worker<br />worker.postMessage({‘cmd’:gen_num});<br />self.onmessage = fn(e){}<br />worker.onerror = fn(e){<br /> // e.lineno<br /> // e.filename<br /> // e.message<br />}<br />// task completed<br />self.postMessage(arrayOfRandomNum);<br />worker.terminate();<br />worker.onmessage = fn(e){<br /> // update DOM with e.data<br />}<br />
    9. 9. Difference from other approach.<br />How different from setTimeout?<br />How different from AJAX?<br />9<br />
    10. 10. So what does Worker look like?<br />10<br />Main Page<br />// Check if workers are supported.<br />if (typeof(Worker) == "undefined") {     document.getElementById(‘support’).textContent = ‘Your browser does not  support Web Workers’; <br /> return false;<br />} <br />// worker object <br />var worker = new Worker('worker.js');              <br />// post message to worker<br />worker.postMessage(‘Are you there?’);<br />// error handling <br />worker.onerror = function(event){     console.log(event.message + ‘ in file = ’ + event.filename + ‘ at line #’  + event.lineno ); <br />}; <br />// on message handler<br />worker.onmessage = function (event)  {      document.getElementById('result').textContent = event.data;<br />} <br />1<br />2<br />3<br />4<br />5<br />
    11. 11. So what does Worker look like?<br />11<br />worker.js<br />self.onmessage = function(event){<br />postMessage(event.data + ‘ Worker says: Yes I am here.’);<br />}<br />OR<br />self.addEventListener('message', function(e) {<br />self.postMessage(event.data +‘ Worker says: Yes I am here.’);<br />}, false);<br />1<br />2<br />
    12. 12. Worker Environment<br />12<br />No BOM<br />No DOM<br />!parent<br /><ul><li>setTimeout, setInterval
    13. 13. navigator object
    14. 14. location object (read-only)
    15. 15. XMLHttpRequest
    16. 16. Spawning other web workers</li></li></ul><li>Subworker/Delegation<br />13<br />Ability to spawn child workers<br />Breaks up huge task into smaller chunks<br />Sub workers should be in hosted in the same domain<br />Location of sub worker file is relative to parent worker (and not main page).<br />
    17. 17. Subworker/Delegation<br />14<br />Parent Worker<br />self.onmessage = function(event){<br />varnum_workers = 4; // total sub workers<br />varpending_workers = num_workers; <br />// loop though the sub-workers<br /> for (vari = 0; i < num_workers; i++) {<br />var worker = new Worker('subworker.js');<br />worker.postMessage(event.data);<br />// on message <br />worker.onmessage = function(event) {<br />varstr += event.data; // collect data <br />pending_workers -= 1; // workers pending<br />// case: all response collected then post to main page<br /> if (pending_workers == 0) self.postMessage(str);<br /> } // on message sub-worker end<br /> } // loop end<br />}<br />1<br />2<br />3<br />4<br />
    18. 18. Subworker/Delegation<br />15<br />subworker.js<br />onmessage = function(event){<br />postMessage(event.data + ‘ Sub Worker says: Yes I am here.’);<br />}<br />
    19. 19. Inline worker<br />16<br />Worker script on the fly <br />Without creating separate worker file<br />BlobBuilder interface<br />
    20. 20. Inline worker<br />17<br />Worker script on the fly <br />Without creating separate worker file<br />BlobBuilder interface<br />var bb = new BlobBuilder();<br />bb.append("onmessage = function(e) { postMessage('msg from worker'); }");<br />varblobURL = window.URL.createObjectURL(bb.getBlob());<br />var worker = new Worker(blobURL);<br />worker.postMessage('Hello'); // post message to start worker<br />// on message<br />worker.onmessage = function(e) {<br />// e.data == 'msg from worker'<br />};<br />
    21. 21. Restrictions<br />18<br />!file:// (chrome)<br />http: | https: && data: | javascript:<br />
    22. 22. Browser Support<br />19<br />✔<br />✔<br />✔<br />✔<br />3.5+<br />4.0+<br />4.0+<br />10.6+<br />X<br />
    23. 23. Use Cases<br />20<br />Prefetching and/or caching data for later use<br />Code syntax highlighting or other real-time text formatting<br />Spell checker<br />Background I/O or polling of webservices<br />Processing large arrays or JSON responses<br />
    24. 24. var worker = new Worker(‘MyWork.js');<br />worker.addEventListener('message', function(e) {<br />document.getElementById(‘heading').textContent(e.data);}, false);<br />worker.postMessage(‘DEMO'); <br />DEMO<br />21<br />onmessage = function(e) {<br />postMessage(e.data);<br />}<br />

    ×