• Save
An Introduction to WebWorker - 01.26.12
Upcoming SlideShare
Loading in...5

An Introduction to WebWorker - 01.26.12






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

An Introduction to WebWorker - 01.26.12 An Introduction to WebWorker - 01.26.12 Presentation Transcript

  • 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> › Internal events (page load, setTimeout, etc) › User input (click, focus, etc)› When one of these occurs, the event gets added to the event queue
  • The Event Loop› The Javascript event loop looks at the event queue periodically› Executes event handlers/callbacks when the queue is not empty
  • 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/
  • Source: http://developer.yahoo.com/blogs/ydn/posts/2010/10/understanding-the-event-loops-and-writing-great-code-for-node-js-part-1/
  • 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
  • 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"
  • 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
  • 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
  • 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
  • Error Handling› worker.addEventListener("error", callback) › filename, lineno, message properties are available for debugging
  • Worker use cases› Prefetching data› Background polling› Parsing big xml/json› Image processing› Any CPU intensive tasks
  • 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!