An Introduction to WebWorker  by Leo Tse
Agenda1. Javascript – the event driven language2. Limitations3. Web Worker4. Browser Support5. Q & A
How does the browser executeJavascript?› Javascript is event-driven› 3 main ways scripts get executed   › <script></script...
The Event Loop› The Javascript event loop looks at the  event queue periodically› Executes event handlers/callbacks when  ...
The event loop postman!         Source: http://developer.yahoo.com/blogs/ydn/posts/2010/10/understanding-         the-even...
Source: http://developer.yahoo.com/blogs/ydn/posts/2010/10/understanding-the-event-loops-and-writing-great-code-for-node-j...
Limitations› Javascript is single threaded   › It can only do one thing at a time› Most browser uses a single event queue ...
Web Worker› Definition - “An API that allows Web application authors to spawn background workers running scripts in parall...
Demo Logic Flow             Main Page                                           WorkerInitialize               worker.post...
Worker Features› Web workers only has access to a subset of JavaScripts  features   › The navigator object   › The locatio...
Stopping a worker› 2 ways to stop a worker   › Worker.terminate() in parent page   › close() in worker› Once the worker is...
Error Handling› worker.addEventListener("error", callback)   › filename, lineno, message properties are available for     ...
Worker use cases›   Prefetching data›   Background polling›   Parsing big xml/json›   Image processing›   Any CPU intensiv...
Browser Support              Source: http://caniuse.com/webworkers
Questions?› Slides will be posted to SlideShare We will send out the link later› You can email me at: leo.tse@digiflare.com
Thanks!
Upcoming SlideShare
Loading in...5
×

An Introduction to WebWorker - 01.26.12

591

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An Introduction to WebWorker - 01.26.12

  1. 1. An Introduction to WebWorker by Leo Tse
  2. 2. Agenda1. Javascript – the event driven language2. Limitations3. Web Worker4. Browser Support5. Q & A
  3. 3. How does the browser executeJavascript?› Javascript is event-driven› 3 main ways scripts get executed › <script></script> › Internal events (page load, setTimeout, etc) › User input (click, focus, etc)› When one of these occurs, the event gets added to the event queue
  4. 4. The Event Loop› The Javascript event loop looks at the event queue periodically› Executes event handlers/callbacks when the queue is not empty
  5. 5. The event loop postman! Source: http://developer.yahoo.com/blogs/ydn/posts/2010/10/understanding- the-event-loops-and-writing-great-code-for-node-js-part-1/
  6. 6. Source: http://developer.yahoo.com/blogs/ydn/posts/2010/10/understanding-the-event-loops-and-writing-great-code-for-node-js-part-1/
  7. 7. Limitations› Javascript is single threaded › It can only do one thing at a time› Most browser uses a single event queue for Javascript and UI rendering › While Javascript is running, no rendering occurs › Page becomes unresponsive
  8. 8. Web Worker› Definition - “An API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism"
  9. 9. Demo Logic Flow Main Page WorkerInitialize worker.postMessage({‘cmd’ : ‘start’}) Startworker loopShow output self.postMessage(100000000) Counter reached100000000 100000000Show output self.postMessage(200000000) Counter reached200000000 200000000Show output self.postMessage(300000000) Counter reached300000000 300000000
  10. 10. Worker Features› Web workers only has access to a subset of JavaScripts features › The navigator object › The location object (read-only) › XMLHttpRequest › setTimeout()/clearTimeout() and setInterval()/clearInterval() › Importing external scripts using the importScripts() method › Spawning other web workers› In summary, you can’t modify the UI
  11. 11. Stopping a worker› 2 ways to stop a worker › Worker.terminate() in parent page › close() in worker› Once the worker is stopped, it has to be re-initialized
  12. 12. Error Handling› worker.addEventListener("error", callback) › filename, lineno, message properties are available for debugging
  13. 13. Worker use cases› Prefetching data› Background polling› Parsing big xml/json› Image processing› Any CPU intensive tasks
  14. 14. Browser Support Source: http://caniuse.com/webworkers
  15. 15. Questions?› Slides will be posted to SlideShare We will send out the link later› You can email me at: leo.tse@digiflare.com
  16. 16. Thanks!

×