I am looking for real-world scenarious for using Web Workers API.
-
1Are they supported by mobile/webkit platforms?– danpMay 5, 2010 at 13:42
-
Don't know for sure, but would guess they are.– Sergey IlinskyMay 5, 2010 at 13:44
-
6@danp Browser support: caniuse.com/webworkers– Dheeraj VepakommaAug 22, 2013 at 7:43
-
1I wrote up a case where we first used a web worker, then determined we were better off without it - windward.net/blogs/web-workers-abandon/#.Vl3QdXarQ-U– David ThielenDec 1, 2015 at 16:57
3 Answers
John Resig (of jQuery fame) has a bunch of interesting examples of using web workers here (mirror) - games, graphics, crypto.
Another use is Web I/O - in other words, polling URLs in background. That way you don't block the UI waiting for polling results.
Another practical use: in Bespin, they’re using Web Workers to do the syntax highlighting, which you wouldn’t want to block your code editing whilst you’re using the app.
From Mozilla: One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread.
As a practical example, think of an app which has a large table of #s (this is real world, BTW - taken from an app I programmed ~2 years ago). You can change one # in a table via input field and a bunch of other numbers in different columns get re-computed in a fairly intensive process.
The old workflow was: Change the #. Go get coffee while JavaScript crunches through changes to other numbers and the web page is unresponsive for 3 minutes - after I optimized it to hell and back. Get Back with coffee. Change a second #. Repeat many times. Click SAVE button.
The new workflow with the workers could be: Change the #. Get a status message that something is being recomputed but you can change other #s. Change more #s. When done changing, wait till status changes to "all calculations complete, you can now review the final #s and save".
-
5Great links! I had never heard of Workers ... mmm, Workers. (Time to go take a long, hot shower ...) Jul 10, 2010 at 0:59
-
68I know this is a two-year-old answer, but I just wanted to mention that you shouldn't need Web Workers for item #2 (polling URLs). XHR happens asynchronously and doesn't block; there's no need to run XHR requests on a separate thread. (Of course, in a modern app you'd want to use WebSockets instead of polling.)– josh3736May 1, 2012 at 4:03
-
6@josh3736 - You are correct but I'm now curious as to whether doing many parallel XHR aync requests can somehow make the browser unhappy? Also, you need local resources to process XHR responses where the workers might be useful.– DVKAug 13, 2012 at 10:39
-
If all of the parallel requests are to the same server, you'll hit the per-hostname limit somewhere between 2 and 9 concurrent connections. (I'd assume that the limit applies across all connections, whether initiated from the main thread or a worker.) Of course, if you have 10 concurrent requests running at one time, you probably need to rethink your application's design.– josh3736Aug 13, 2012 at 14:07
-
2Excuse my simple question, but what do you refer to as "#" in your example above? Mar 1, 2017 at 7:34
I have used them for sending larger amounts of data from the browser to server. Obviously, you can do this with regular AJAX calls, but if this takes up one of the precious connections per hostname. Also, if the user does a page transition during this process (e.g clicks a link), your JavaScript objects from the previous page go away and you can't process callbacks. When a web worker is used, this activity happens out of band, so you have a better guarantee that it will complete.
-
2But you have to exchange the message with the web-worker. When the cost of this operation deserves the benefit ? Apr 17, 2018 at 13:59
Another Use case:
Compressing/De-compressing files in the background, if you have a lot of images and other media files that are exchanged from the server in compressed format.
-
49This shouldn't be happening in JavaScript. Images are already compressed (PNG, JPEG) using algorithms designed to efficiently compress image data. Throwing another layer of compression on top can actually increase the data's size. For other types of data (eg a large JSON file), compression should be handled by the browser using standard HTTP gzipping. If you're doing compression in JavaScript, you're probably doing it wrong.– josh3736May 1, 2012 at 3:59
-
13I see some users disqualifying the use case, but here's what i meant to say. consider an application like MS word, like a powerful document editor through which you could embed images,music files, data, excel sheets etc all in ONE file. and consider that you have a web based client and a desktop client and a IOS/Android client. For this kind of a use case, you can store all the file contents in a zip file and then unzip at each client.– sbrJan 29, 2013 at 18:25
-
3The Instapaper bookmarklet compresses the page being saved before sending to it to the server. It saves time and bandwidth. Oct 31, 2013 at 3:51
-
13@josh3736 The only thing a browser can do is gunzip a file from a web server (or browser cache). It can't decompress data from local storage, nor from a websocket, and it can't compress at all. Web apps are sending an ever increasing amount of data upstream, and compression for this is extremely useful. Equally valid a year ago when this was posted: If you can't think of any valid use-cases for JavaScript compression, you probably lack imagination.– AdriaDec 10, 2013 at 9:27
-
2@Adria: The websocket standard is in the process of adding compression support. If you're dealing with images generated in the browser (
<canvas>
), you can get the image data in a compressed format (ie png). My point was not that it is never appropriate to compress in JS; my point was that in most cases, it is not, and for most cases -- especially dealing with images, which is what this answer talks about -- there is a better alternative to rolling your own compression.– josh3736Dec 10, 2013 at 15:43