Running expensive processes on the main JS thread will cause the UI to flicker or the website be non-responsive.
The solution that was introduced was web workers - JS code that is running concurrently to the main (UI) thread. Web workers have a very limited scope and very limits set of tools to interact with the browser and the DOM itself (https://developer.mozilla.org/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
Sending data to and from the web worker is done using JSON/String messages and ArrayBuffers. I will not be talking about the up and down sides of using both.
Another option to send data to web workers is using IndexedDB. This option was not available at the beginning and is slowly being introduced to all of the major browsers (Chrome >= 37, IE >= 10, FF >= 37. Safari?... still waiting.).
The idea came from basic worker patterns, for example:
- http://www.infoq.com/news/2010/09/Patterns-Windows-Azure
- AWS Worker in Elastic Beanstalk
that suggest having a joined database between the main application and the worker, while only passing "tasks" or actions to the worker. The worker will then process the request using the shared database and will either alter the data there, or send a simple reply to the task.
The same can work in a web worker combined with indexedDB.
Using this method, spawning new workers won't require synchronizing data with them or sending each worker the entire data store - they are all synchronized using one single database.
To introduce the combination of both technologies I have implemented a very quick demo available here - http://raananw.github.io/WebWorkers-IndexedDB/
The site generates a random array of integers and is using this data to generate delays (or simulate work). It has the option to execute the work on both the main thread and a web worker.
The main thread simply executes the work. You will notice that the UI gets stuck until the process is over. The progress bar is being updated, but it doesn't show.
The web worker option is executing the following tasks (I know, UML would be much better :-) ):
- [Main Thread] Store the entire array (single items) in an indexed db store.
var added = 0;
for (var i = 0; i < data.length; ++i) {
var req = objectStore.add(data[i]);
req.onsuccess = function () {
if (++added == data.length) {
successCallback();
}
}
}- [Main Thread] Send a simple post message with the name of the db and the name of the store to execute
webworker.postMessage({ dbName: "webworkerTest", dbVersion:1, asArray: asArray });- [Web Worker] Open the database, fetch all records from the store (using a cursor)
//...
var cursor = evt.target['result'];
if (cursor) {
items.push(cursor.value);
cursor.continue();
}- [Web Worker] Do the work (the exact same function that was used in the main thread's work). [Main Thread] Update the progress bar.
- [Web Worker] Notify the main thread that we are finished.
- [Main thread] Load the records from the db (to simulate an update that was done by the web worker).
- ???
- Profit.
Because it can be super heplful. Having a persisted model in a DB and having an external thread process it and update it can benefit a lot of applications - from games to heavy canvas manipulations (WebGL comes to mind as well).
Simply contact me!
Copyright (c) 2014-2015 Raanan Weber (info@raananweber.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.