William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

HTML5 Web Workers

HTML5 Web workers

1. What Web Worker can do?
  • Caching data for use in your pages.
  • Processing large amounts of data in arrays or large JSON response from web service.
  • Managing a database connection along with adding and removing records for the main page.
  • Automated race track betting agent.
  • Analyzing video.
  • Spell checking the page s the user types.
  • Polling web services and alerting the main page when something happens.
  • Image processing of data in a canvas.
  • Code syntax or other language highlighting.
  • Pre-fetching data based on what your user is doing.
  • Managing advertising for your page.
2. keys to use HTML5 Web Workers
  • Without Web Workers, Javascript is a single-threaded, meaning it can do only one thing at a time.
  • If you give a JavaScript program too much to do, you might get the slow script dialog.
  • Web workers handle tasks on a separate thread so your main JavaScript code can continue to run and your UI remains responsive.
  • The code for a Web worker is in a separate file from your page’s code.
  • Web workers don’t have access to any of the functions in the code in your page or the DOM.
  • The code in your page and the web worker communicate via messages.
  • To send a message to a worker, use PostMessage.
  • Your can send strings and objects to a worker via postMesage, you can’t send functions to a worker.
  • Receive messages back from workers by setting the worker’s onmessage property to a handler function.
  • A worker receives messages from the code in your page by setting its onmessage property to a handler function.
  • When a worker is ready to send back a result, it calls postMessage and passes the result as the argument.
  • Worker results are encapsulated in an event object and placed in the data property.
  • You can find out which worker sent the message using the event.target property.
  • Messages are copied, not shared, btw your main page code and the worker.
  • You can use multiple workers for large computations that can be split into multiple tasks, such as computing a fractal visualization or ray tracing an image.
  • Each worker runs in its own thread, so if your computer has a multicore processor, the workers are run in parallel, which increases the speed of the computation.
  • You can terminate a worker by calling worker.terminate() form the code in your page. This will abort the worker script. A worker can also stop itself by calling close().
  • Workers also have an onerror property. You can set this to an error handling function that will be called if your worker has a script error.
  • To include and use JavaScript libaries in your worker file, use importScripts.
    //You can also use importScripts with  JSONP.
    //Implement the callback you pass in the URL query in the worker file.
    function makeServerRequest() {
      importScripts(('http://someserver.com?callback=handleRequest');
    }
    function handleRequest(response) {
      postMessage(response);
    }
    makeServerRequest();
  • While workers do not have assess to the DOM or functions in your main codes, they can use XMLHttpRequest and Local Storage.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: