Run scripts in background threads and perform tasks without interfering with the user interface. We all know that the JavaScript code executes in a single thread. It means that code will execute line by line and if a particular task takes a long time to complete everything else is held up until that task finishes. If we want to unload the main threat Web Workers what is all about. ☝️ What you should know Web Workers is supported almost in all browsers. For slightly more controlled error handling and backwards compatibility, it is a better way to do a check. if (window.Worker) { ...} Create only one instance, each call is going to load file. So, you may see something like that in Network. new Worker('worker.js') worker.js React + Redux With Redux update store is simple. So, we are going to have a place or a file where we create a Worker instance, export it and listen event where we dispatch an event when a data comes from the Worker. onmessage In we may if we need to import some scripts to global worker scope. In Web Worker you may use so in example below I import and use it for XHR calls. listener is called whenever new message bubbles through the worker. method sends a message to the worker’s inner scope. worker.js importScripts XMLHttpRequest axios onmessage postMessage Use Worker instance. Import already existing Worker and call method with data which you want to pass to the Worker postMessage worker.js Conclusion Web Workers is powerful API you should definitely use it. It is good for background sync, prefetching data, ray tracing. Using web workers can have a significant impact on the performance of your web application. 📃 Useful links Using Web Workers The Worker interface Computing with JavaScript Web Workers Using Web Workers to Speed-Up Your JavaScript Applications Web Workers Spec 👏 👍 Thank you for reading. Suggestions, comments, thoughts are welcome 😎 If you like this, clap, follow me on medium , twitter , github share with your friends
