Update: I have summarised this series of blog posts in a CodeProject article, available here.
In this series of posts I showed a sweet way to use Web Workers to improve performance on browsers that support them, without impacting performance on browsers that don't, by using jQuery 1.5 Deferred objects to wrap a "generic" worker.
Click here for the jQuery plugin page where you can download the jQuery plugin code and report bugs. Both the compressed and uncompressed version are available, whether you want to see the final code or just want to include it in your application.
To use this plugin optimally, you should isolate functions in your code that meet the following criteria:
- The function must be "static" - it cannot access any closure variables, only variables that are passed to it through its arguments. You can use setTimeout, setInterval, XMLHttpRequest, and construct Web Workers - but no other globals are available.
- The function takes longer than 100ms to run. This ensures that the benefits of running it in a background worker are greater than the overhead of constructing the worker.
- The function executes less than 5 million statements. This is the limit after which Internet Explorer will display the error "A script on this page is causing Internet Explorer to run slowly". This occurs because IE does not support Web Workers and the code is run in the UI thread. To get around this, split the work into multiple parts, implant calls to setTimeout into it, or offer an alternate application to IE users. Of course, if you are optimising an existing application, your code won't run any slower in Internet Explorer than it does already.
To get started, download the minified file and include it in your application after you've included jQuery 1.5.
Call the $.work function to run a function in another thread. This returns a Deferred object which you can use like any other Deferred jQuery object.
Let's assume you've got a long running function "doStuff" in your application:
This can be parallelised by re-jigging the function to take a single parameter, and adding a callback to the 'done' helper function:
The 'done' function above only gets called when the function executes without any exceptions. To handle exceptions, use the 'then' and 'fail' helper functions:
Multiple threads (fork and join)
You can run multiple workers and easily join the results using the $.when Deferred helper function:
I look forward to seeing some great applications of this plugin!