Web Workers: Handling Heavy Processing on the Client Side

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

In this talk I will bring an overview how we handle with large process on Client Side (WebApp Applications)  using Web Api called Web Worker. I'm going to bring a view of a use case that I had to apply web workers and the advantages it brought in heavy processing, called “Rinha Front end” on Brazil, an challenge where we had to process Json files of various sizes just using the client side and without affecting the user experience and blocking the use of the application.
So I this talk I will bring a simple case where using pure Javascript and how to use Web Workers to process out of the main thread and block our interactions with the page.  We will create a simple application using vanilla JS and I will introduce you this feature.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

Kevin Wehara is a staff engineer at iFood, a Microsoft MVP, and a content tech creator on YouTube. He is also a Prochain Campinas organizer and a collaborator with NodeBR and GDG Campinas.

Kevin Wehara's talk focuses on web workers and handling large processing on the client side.

A Web Worker is an API provided by browsers that allows for operations, typically large calculations, to be executed off the main thread, ensuring the main thread is not blocked.

Web Workers are used to execute heavy processing tasks off the main thread, preventing UI blocking and improving application performance.

The main benefit of using Web Workers is that they allow for heavy processing to occur without blocking the main thread, which maintains the responsiveness of the UI.

Kevin Wehara demonstrates the use of Web Workers by creating two applications: one without Web Workers and one with Web Workers, and comparing their performance.

Kevin Wehara's article on Web Workers can be found on dev.io by searching for Kevin Wehara or introducing JavaScript WebWorkers.

Kevin Wehara uses an example where a large operation blocks the main thread, preventing other actions like changing the background color until the process is complete.

Kevin Wehara shares his tech content on YouTube and writes articles on dev.io.

Kevin Wehara works in the iFood Logistics Rival team, focusing on geoprocessing, geolocation, partner delivery areas, and delivery routes.

Kevin Uehara
Kevin Uehara
18 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.

1. Introduction to WebWorkers

Short description:

In this talk, I will introduce web workers and how they can handle large processing on the client side. I will provide examples, show benchmarks, and discuss tradeoffs. We will create an application both with and without WebWorkers to compare performance.

And hi everyone, my name is Kevin Wehara, and first of all, I'm very happy to be here participating in the JS Nation West edition, and I'm so glad to be here and thank you so much for watching my presentation. And today I'm here to talk about web workers and how we can handle with large processing on the client side. So in this talk, I want to introduce you what is web worker. OK, so let's begin.

And how I said before, my name is Kevin Wehara, I'm a staff engineer at iFood. I'm going to talk about iFood in the next slides. But I'm here in Brazil, I'm a Microsoft MVP, speaker and content tech creator on YouTube, you can find me there. I'm a Prochain Campinas organizer. Prochain is a Prochain event here in Campinas. Campinas is the city where I live today. I'm NodeBR and GDG Campinas collaborator. NodeBR is Node Brazil, and GDG is Google Developer Group. OK. And I'm from Brazil, Sao Paolo, and one of my hobbies is play CS2, but I'm very bad and I give up. I'm a software developer for around nine years and focus on front for around five years. And I'm familiar of a good TypeScript. Some curiosity of me. And I work in the iFood Logistics rival. iFood is the biggest food delivery company here in Brazil today. I work in location, location is the name of my team. In addition to other internal projects here, the context what I work today is geoprocessing, geolocation, partner delivery areas, delivery routes, and much more. OK.

So what I'm going to talk and what I'm going to cover in this talk? I want to introduce you what is WebWorker. I want to show some examples with the shown the codes and the hands of the code on hands on the codes. So let's see some examples and see the benchmark, the tradeoffs. Let's see the results. And let's finish with the context of my context. So the application overview, let's create an application without using WebWorkers and then we're going to implement it and visualize the application performance. OK, so we're going to create an application with WebWorkers and another without WebWorkers. OK, so with these two applications, we're going to compare and see those results with the benchmark.

2. WebWorkers and Demo Project

Short description:

WebWorkers are mechanisms that allow operations, usually larger calculations or huge operations, to be executed from the main thread, ensuring the main thread is not blocked. I will show examples and discuss the benefits of using WebWorkers. I have written an article on dev.io about WebWorkers, which you can find by searching for Kevin O'Hara or introducing JavaScript WebWorkers. Let's continue with the demo project using VanillaJS and the live server extension of VS Code.

OK, so what is WebWorker? The WebWorker is an API provided by the browser by default. We know that JavaScript itself is single thread without going to the merits of Node.js with libuv. However, with the image loop, callback query, stack architecture, we can say that JavaScript can handle a synchronous process on demand. OK? And the browser offers a series of APIs that can be used by development teams. For example, storage is like session storage and local storage, indexed DB, workers, PWA, performance monitoring, performance monitoring, sorry, lighthouse. And one of the topics I want to address in this talk is WebWorker and how do they live, how do they survive, how do they reproduce. I'm kidding. But why use, what is the benefits to use WebWorkers? OK, when use and when not use. So WebWorkers are mechanisms that allow operations, usually larger calculations or huge operations to be executed from the main thread, making sure the main thread is not blocked. And what I want is for a function to perform certain heavy processing that will block integration of the page, the UI. To be more clear, I'm going to show some examples, OK? And before I show the example, I want to say that I wrote this article about WebWorkers and you can find on dev.io. So just in this article, I did dive on this concept. So you can find in the dev.io, searching by Kevin O'Hara or searching by introducing JavaScript WebWorkers, OK? So let's continue. Just show me the code, the best part. OK. So for demo projects, I will not use any framework or lib, for example, React, Angular, Vue, Velt. I'm going to just use VanillaJS, OK, the pure JavaScript. And to do this, I'm going to create our workspace with the following files, the index.html, the index.js, and our style, OK, CSS. So here, this is our files. So in principle, don't pay attention to this code here. I want to show you this extension here, the live server. OK. The live server is an extension of VS Code. So you can install just to use a server in your local hosts and we have the hot reloads and this is going to facilitate our lives, OK. So the HTML here is very, very simple. So here, we have our import with our style, the script with the index.js. I'm using a sync import. And here, I have this three elements the button to start a large operation and the second button will change the background color. And here, I have this three tag just to the output, OK, the time of the processing, OK. And easy-peasy.

3. Using Web Workers

Short description:

I simulate a large operation in JavaScript using a loop with a huge value, increment it, and return the result. Then, I have event listener functions for starting the large operation and changing the background color. The main thread gets blocked without web workers, preventing interaction. To resolve this, I create a web worker file and move the function to it. The web worker receives messages and performs operations based on them.

That's it, OK, the HTML. And the CSS here, I'm resetting the CSS. Here, adding some styles for our button. So that's it with the background color blue. And when hover, I change, OK. So that's it. And the JavaScript here in the first function, I have a large operation. I'm going to simulate a large operation. So here, I have a loop with this big number here and give a huge value, OK. And after that, I'm going to increment this value here and I'm just returning this value after I finish the loop.

In the second function here, is an event lister function. I just call the first function when click on the start large operation, OK, here. And when I click, I'm going to call the handle large operations, OK. And the second and the third function here is another event lister just to change the background color, OK. So I get the body and if the background color is dark, I change to white. If it's white, I change to dark, OK.

The result without web workers, OK. So I want you that, I want you to pay attention in this example. So I'm going to click. First, I'm going to click in the first button to start the large operation and you can see that I can't click on the second button because the main thread is blocked, OK. So let's see. So I'm going to click start large operation and I can't click on the second button because the main thread is blocked, OK. So after the process finish, so the main thread is free, I can click to change the background color, OK. So this is some problem that we need to resolve. So how we can resolve? Using web worker. And let's create another file called worker.js, OK. And here, I change the function that was previously in the index.js. Now it's in, it is in the web worker file, OK. So I get the handler operation that was in the index.js, show worker.js. And here, we have this function here, the all message that represents all message that we received in the web worker and based on that, perform some operation.

4. Using Web Workers Continued

Short description:

If the event data equals operation, call the handler operation and post the value. Instantiate the web worker and define the operation name. Receive and print the timestamp when receiving a message. Change the event listener to click and call the operation name. The UI is not blocked with web workers.

So if the event dot data, that is the name of the operation, I call operation. But I can name with, I don't know, I'm very bad, I'm sorry. But I don't know, jsnation event name, OK. So just I put here and this is going to be the name of our event, OK. So if the name of our event equals event.data equals operation, I just call the handler operation and I post the value here. So when I return, I'm going to post the message with the the value, OK. So note that I remove the processing have function for worker.js. So I don't have the handler operation function here.

And now we need to instantiate the worker API with new worker here, OK. So I'm going to instantiate the web worker, OK. So I'm going to call pass as parameter, the name of our file. And here, I have some before, I'm going to get the date now. And here, I'm going to call the operation name here of our event, OK. The same name, OK. And here, I'm going to call the all message function. And here, I'm calling after with the date now. And here, I'm going to create the when we receive the message here, the post message here. I'm going to just print the time, OK. And I'm going to create, put on the pre-tag, the text content with the value, OK. The event.date. So here, this is the timestamp, OK.

And the event listener to change the background color, don't change, OK. So I just changed the event listener to click, OK. And when I click, so I just call the operation name of our event. And after we finish the work, we will, it's going to receive the message, OK, with the value. So let's see the example here. I start, I click, so it's, I click on the start large operation. And when I click on the start large operation, I can click on the change background color. And after the process is finished, the value will be printed here, OK. And with the web workers and start having process, the UI is not blocked due to the main thread, OK.

5. Final Remarks and Contact Information

Short description:

Find me on YouTube for React courses and articles on .io. Check out my QR code for social media links. Thank you for watching my presentation!

So, guys, that's it in short. OK. I know that probably this is going to be confused. I don't know. But you can find me on YouTube, oh, it is. Oh, my God. I'm kidding. You can find my channel on YouTube. So I have some courses with React, about React, state management, tools, and Rectories. So you can find me on YouTube. And I end on the .io where I wrote some articles. I write some articles, sorry. So you can find me there too. OK. So in the same example, and the same concept of Web Workers, I wrote this article. So you can find there where I did dive in this concept, OK, with more details. So here is my QR code. You can find me, my social medias, my LinkedIn, Instagram, Twitter, GitHub, and Dev.io and my YouTube channel. OK. Thank you so much. And I'm very, again, I'm very, very happy to be here. This is my, it's a privilege to be here representing my country. And I'm so happy to be here. Thank you so much, everyone, to watch my presentation. OK. And, oh, I, right. We have some error here. So thank you so much. And I say in this all my videos and stay well always. OK. Thank you so much. And see you soon.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced 2021React Advanced 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Patterns Made Simple
React Day Berlin 2024React Day Berlin 2024
62 min
React Patterns Made Simple
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can make their code more efficient, readable, and maintainable. We'll introduce each pattern, explain how it works, and demonstrate practical examples. By the end of the session, participants will have a solid understanding of how to use these patterns in their projects.Learning GoalsHOCs Compound Components Provider Patterns Functions as Child Portals Modularity Maintainability Real-world Application.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up