advanced 7 min read

Web Workers vs Service Workers vs Worklets

Web Workers offload CPU-intensive calculations to background threads; Service Workers act as programmable network proxies for offline caching, background sync, and push notifications.

Why it matters in interviews

JavaScript's single-threaded nature means heavy computation blocks UI responsiveness. Distinguishing when to use Web Workers (CPU) versus Service Workers (Network/Cache) is a core Senior/Staff interview competency.

Visual & Interactive Explanation

Web Workers vs Service Workers Comparison

Interactive Comparison

Web Worker

Background CPU Computation

CPU Offloading

Primary RoleHeavy math, parsing, crypto, canvas

Network Intercept❌ Cannot intercept fetch

LifecycleTied to parent browser tab

DOM Access❌ No direct DOM access

Strengths

•Eliminates main-thread freeze
•True multi-core parallelism

Trade-offs

•postMessage serialization cost unless transferred

Service Worker

Programmable Network Proxy

Network & PWA

Primary RoleOffline caching, PWA, background sync

Network Intercept✅ Intercepts all fetch requests

LifecycleIndependent of open tabs

HTTPS Only✅ Required (except localhost)

Strengths

•Full offline capability
•Background push notifications

Trade-offs

•Complex caching invalidation and update lifecycles

Code Examples & Implementation

Service Worker Fetch Interception (Stale-While-Revalidate)

// public/sw.js
const CACHE_NAME = 'app-cache-v1';

self.addEventListener('fetch', (event) => {
  // Intercept network requests
  event.respondWith(
    caches.open(CACHE_NAME).then(async (cache) => {
      // 1. Check cache first
      const cachedResponse = await cache.match(event.request);
      
      // 2. Fetch fresh version from network in parallel
      const networkFetch = fetch(event.request).then((networkResponse) => {
        if (networkResponse.status === 200) {
          cache.put(event.request, networkResponse.clone());
        }
        return networkResponse;
      }).catch(() => cachedResponse);

      // Return cached immediately if present, otherwise await network
      return cachedResponse || networkFetch;
    })
  );
});

Interview-Ready Answers

Web Workers run CPU-heavy code in parallel background threads to prevent UI freezes. Service Workers act as network proxies between browser and network to enable offline caching and push notifications. Neither has direct DOM access.

Official Documentation & Specifications

MDNMDN: Using Web Workers

MDNMDN: Service Worker API & PWA Architecture

web.devweb.dev: Service Worker Lifecycle

Follow-up Questions & Deep Dives

Common Mistakes & Anti-Patterns

Trying to access window, document, or localStorage inside a worker thread
Copying massive 50MB ArrayBuffers over postMessage instead of transferring ownership
Not handling Service Worker update/skipWaiting lifecycle, serving stale code forever

Real-World Architectural Scenario

A client-side image editor applies blur and color matrix filters to 4K user uploads. The UI freezes for 3 seconds on apply. How do you solve this?

Rate Your Readiness

Rate how comfortably you can explain this in an interview to update your global readiness gauge:

Rate your confidence: