From the course: React: Web Workers

Advanced optimization techniques - React.js Tutorial

From the course: React: Web Workers

Start my 1-month free trial Buy for my team

Advanced optimization techniques

“

- [Narrator] Let's take a quick moment to refresh our memory. Web workers are JavaScript scripts that run on separate threads, independent of the main UI thread. This allows us to offload computationally-intensive task, preventing them from blocking the user interface. However, creating a web worker isn't a magic bullet. There are still ways to optimize how these background scripts execute. Advanced optimization techniques. Now let's explore some key techniques to optimize web worker performance. Data transfer optimization. Sending large amounts of data between the main thread and the web worker can be a bottleneck. To address this, consider transferring smaller chunks. Break down large datasets into smaller, manageable pieces before sending them to the web worker. This reduces the initial transfer time and memory usage. Use structured cloning for complex data structures. Leverage the structured clone method for efficient data transfer. This ensures only the necessary data is copied, unlike JSON stringify, which can lead to unnecessary overhead. All right, let's walk through this example of using structured cloning to send data between the main thread and a web worker. First, on the main thread, we have an object data to send that includes an array, and another object with a property prop one. This is our data that we want to pass to the web worker. Next, we create a web worker using new worker, which will run our background script. To send the data to send object to the worker, we use worker dot post message. But instead of just passing the data directly, we use structured clone. This method efficiently clones complex data structures like objects or arrays, ensuring that everything is transferred correctly without unnecessary overhead. Now moving to the worker script, in my worker, the worker receives the data through self dot on message. We can access the data sent from the main thread with self dot message. When you console dot log it, you'll notice that the data structure remains intact just as it was in the main thread, thanks to structured cloning. This approach ensures efficient and safe data transfer, especially for more complex data types like objects and arrays. Leveraging shared web workers. For scenarios where multiple components require similar background processing, creating a single, shared web worker can be more efficient. This eliminates the overhead of creating new workers for each component. Use the shared worker constructor to achieve this. Let's break down this sample code, which uses a shared worker in JavaScript. The idea is to have multiple parts of your web app share a single worker thread to handle background tasks efficiently. First, we check if window.mySharedWorker exists. If it doesn't, we create a shared worker using a JavaScript file, shared worker. This makes sure we don't create multiple workers unnecessarily. Then my shared worker is assigned to reference that worker. Now, different components in your app can communicate with this shared worker. In the 'my component' function, we have a button. When clicked, it sends a message to the worker, like, task long running task through the port. This will trigger a background task, keeping the main thread responsive. That's it. One shared worker handling tasks for multiple components in the app. Memoization. Web workers can also benefit from memoization techniques. If a function performs repeated calculations with the same inputs, store the results for future use, avoiding redundant computations. For this example, we have a memo object used to store results of previously computed task. This helps us avoid recalculating the same thing twice, speeding up future requests. The expensive calculation function checks if the result is already in memo. If so, it returns the cash result immediately. If not, it runs the complex calculation. You can imagine this as some CPU-intensive task. Saves the result in memo and then returns it. Next, the self on message event listener waits for a message from the main thread. When data is received, it runs the expensive calculation function with that data. After getting the result, it sends it back to the main thread using post message. This approach keeps your app responsive even while doing intensive work in the background. By implementing these advanced techniques, you can significantly improve the performance of your react applications using web workers. Remember, the best approach depends on the specific use case.

Contents