Frontend Mastery

Web Workers: Offloading heavy calculations to background threads

1 Views Updated 5/4/2026

Web Workers in React

JavaScript is single-threaded. If you perform a 2-second calculation, your UI freezes. Web Workers allow you to spawn actual background threads that run in parallel to the main UI thread. This is True Parallelism for the web.

1. Communication via PostMessage

Web Workers live in a separate memory space. They cannot access the window, document, or state directly. You send them data using postMessage(), they do the work, and they send the result back. It is like an **Internal API call** within the browser.

2. Perfect Usecases

  • Image/Video processing in the browser.
  • Large dataset filtering or complex math.
  • Encryption/Decryption of data.

4. Interview Mastery

Q: "What is the penalty of using Web Workers?"

Architect Answer: "The **Serialization Penalty**. When you send data to a worker, the browser must copy ('Serialize') that data into a format that can cross the thread boundary. For massive objects, this copy operation itself can block the main thread. To fix this, we use **Transferable Objects** (like ArrayBuffers), which 'transfer' ownership of the memory to the worker instead of copying it, making the hand-off near-instant."

Frontend Mastery
1. Core Foundation & Modern JS
ES6+ for Architects: Closures, Generators, and Symbols Asynchronous JS: Event Loop, Microtasks, and Promises TypeScript Mastery: Advanced Types, Generics, and Utility Types
2. React Internals & Core Hooks
Virtual DOM vs Reconciliation: The Fiber Architecture Effective useState & useEffect: Avoiding infinite loops useMemo vs useCallback: When optimization becomes a bottleneck useContext + useReducer: Building a built-in state manager Custom Hooks: Extracting business logic for reusability
3. Professional State Management
Redux Toolkit (RTK): Slices, Selectors, and Thunks RTK Query: Automating API caching and synchronization Zustand: The lightweight alternative to Redux Signal-based State: The future of fine-grained reactivity
4. Performance & Rendering
Component Re-rendering: How to profile and fix slow UIs Lazy Loading & Code Splitting: Shrinking your bundle size Virtualization: Rendering million-row lists efficiently Web Workers: Offloading heavy calculations to background threads
5. Design Systems & CSS
Modern CSS: Grid, Flexbox, and Container Queries CSS-in-JS vs TailWindCSS: Choosing the right styling strategy Storybook: Building a shared component library Accessibility (a11y): Building inclusive web interfaces
6. Next.js & Modern Frameworks
Next.js App Router: SSR vs SSG vs ISR React Server Components (RSC): The end of the Waterfall Data Fetching Patterns: Streaming and Suspense SEO for Frontend: Meta Tags, JSON-LD, and Core Web Vitals
7. Testing & Security
Unit Testing: Vitest and React Testing Library E2E Testing: Playwright for mission-critical flows Frontend Security: XSS, CSRF, and Content Security Policy State Synchronization: Optimistic UI & WebSockets
8. Final Polish & Interview
Micro-Frontends: Scalable architecture for enterprise teams Frontend Architect Interview: System Design & Performance