> JavaScript > Performance & Optimization > Conquer Long Tasks: Liberate the JavaScript Main Thread

Conquer Long Tasks: Liberate the JavaScript Main Thread

In the high-stakes arena of modern web development, user experience reigns supreme. A buttery-smooth interface, responsive to every interaction, defines success. Yet, an insidious saboteur lurks in many applications: the JavaScript long task. These monolithic operations seize control of the browser's main thread, freezing the UI, delaying user input, and shattering the illusion of fluidity. We identify a critical threshold—any task exceeding 50 milliseconds—that fundamentally degrades user perception, preventing that coveted 60 frames per second experience.

This comprehensive exploration equips you with the strategic insights and tactical tools to systematically identify, diagnose, and rectify these performance bottlenecks. We dissect the anatomy of a long task, unveil the browser's internal workings, and chart a decisive course towards unparalleled responsiveness. Mastering this domain is not merely an optimization; it is a declaration of commitment to superior user journeys, fundamentally underpinning your ability for crafting JavaScript code that executes with unparalleled efficiency and speed. Prepare to activate a paradigm shift in your application's performance profile, transforming sluggish interactions into instantaneous responses.

Published on: 18 October 2026

Deconstruct Long Tasks: Unveiling the Main Thread's Bottlenecks

A long task in JavaScript represents any block of code execution on the browser's main thread that exceeds 50 milliseconds. This threshold is not arbitrary; it's the critical barrier beyond which the browser cannot consistently render frames at 60 frames per second (fps), leading to visible jank, delayed input responses, and a demonstrably poor user experience. The main thread, a single, highly contested resource, orchestrates nearly every aspect of the browser's operation: parsing HTML, rendering CSS, executing JavaScript, and handling user input. When a long task monopolizes this thread, all other operations halt, creating a frozen, unresponsive interface.

We must grasp the profound impact of these tasks on vital performance metrics. For instance, the First Input Delay (FID), a Core Web Vitals metric, directly quantifies the time from a user's first interaction (click, tap, key press) to the browser's actual response. A long task blocking the main thread directly inflates FID, frustrating users. Similarly, Total Blocking Time (TBT), another critical metric, aggregates the blocking portions of all long tasks, offering a comprehensive measure of a page's non-responsiveness before it becomes fully interactive. These metrics are not merely numbers; they are direct indicators of user frustration and abandonment. Furthermore, search engines like Google incorporate these Core Web Vitals into their ranking algorithms, directly linking performance to discoverability.

To effectively combat long tasks, we first dissect their common manifestations. They frequently arise from:

Excessive JavaScript execution: Complex calculations, large array manipulations, or extensive loops executed synchronously.
DOM manipulation: Rapidly adding, removing, or updating a large number of DOM elements, especially when triggering forced reflows or repaints.
Expensive event handlers: Synchronous logic tied to user interactions that take too long to complete.
Third-party scripts: Often unoptimized analytics, ads, or tracking scripts that block the main thread during their initialization or execution.
Layout thrashing: Repeatedly reading computed style values (e.g., offsetWidth, getComputedStyle) immediately after modifying styles, forcing the browser to perform synchronous layout calculations.

Our strategy commences with a fundamental understanding of these root causes, arming us to pinpoint vulnerabilities within our codebase and forge a path towards responsive, high-performance applications. The provided code example illustrates a synchronous, CPU-intensive operation that invariably manifests as a long task, providing a tangible benchmark for your initial investigations.

/*
 * Example 1: A Synchronous, CPU-Intensive Long Task
 * This function simulates a heavy computation that blocks the main thread.
 */
function simulateLongTaskSync() {
    console.time('Long Task Execution');
    const start = performance.now();
    let result = 0;
    // A deliberately expensive loop to block the main thread
    for (let i = 0; i < 1_000_000_000; i++) { // One billion iterations
        result += Math.sqrt(i) * Math.sin(i);
    }
    const end = performance.now();
    console.log(`Synchronous Long Task completed in ${end - start} ms. Result: ${result.toFixed(2)}`);
    console.timeEnd('Long Task Execution');
}

// To observe its blocking nature, try calling this function directly:
// simulateLongTaskSync();

/*
 * Example 2: DOM Manipulation Leading to Forced Reflows (Layout Thrashing)
 * This function modifies DOM elements in a way that can trigger long tasks
 * if not batched or optimized.
 */
function simulateForcedReflows() {
    const container = document.getElementById('target-container');
    if (!container) {
        console.error('Target container not found!');
        return;
    }

    console.time('Reflow Task Execution');
    const itemsToCreate = 1000;
    for (let i = 0; i < itemsToCreate; i++) {
        const div = document.createElement('div');
        div.textContent = `Item ${i}`;
        div.style.width = `${100 + i % 50}px`; // Triggers layout calculation
        div.style.height = '20px';
        div.style.border = '1px solid #ccc';
        div.style.margin = '2px';
        container.appendChild(div);
        // Reading a style property here would force a reflow on each iteration,
        // significantly exacerbating the issue. E.g., container.offsetWidth;
    }
    console.timeEnd('Reflow Task Execution');
}

// To observe this, ensure you have a div with id='target-container' in your HTML
// <div id="target-container"></div>
// And then call:
// simulateForcedReflows();

/*
 * To test these examples:
 * 1. Open your browser's DevTools (F12 or Cmd+Option+I).
 * 2. Navigate to the 'Performance' tab.
 * 3. Start recording (the circle icon).
 * 4. Execute one of the functions in the browser console (e.g., simulateLongTaskSync();).
 * 5. Stop recording.
 * 6. Observe the flame chart for a long task block on the main thread.
 */

Engineer Detection: Pinpointing Long Tasks with Browser DevTools

The browser's Developer Tools are your primary weapon in the war against long tasks. We activate a systematic approach, transforming raw performance data into actionable insights. Navigate directly to the Performance tab, the command center for main thread analysis. Upon initiating a recording, we capture a temporal snapshot of all browser activity. The resulting flame chart within the Main section is our battle map, visually representing function calls and their durations.

Identify long tasks by scanning for tell-tale visual cues: large, solid blocks of color, often adorned with a red triangle in their top-right corner, signifying a task exceeding the 50ms threshold. Zoom into these blocks to reveal the intricate call stack—a precise lineage of function executions that culminated in the bottleneck. This granular view enables us to pinpoint the exact JavaScript functions responsible for the slowdown, isolating the culprits from the innocent.

To refine our analysis, we leverage specific DevTools functionalities:

CPU Throttling: Simulate slower device conditions by selecting a lower CPU speed (e.g., '6x slowdown' from the dropdown next to the record button). This often amplifies long tasks that might be subtle on a powerful development machine, revealing issues users on less capable devices would encounter.
Bottom-Up and Call Tree tabs: These invaluable panels provide aggregated data, summarizing the total time spent in each function, including its children (Bottom-Up) or displaying the full call stack with time spent (Call Tree). This helps prioritize optimizations by revealing the most time-consuming functions across the entire recording.
User Timings: Integrate custom markers into your code using the Performance API (performance.mark() and performance.measure()). These programmatic timings appear directly on the flame chart, allowing you to delineate specific code sections and precisely measure their duration within the DevTools interface, as demonstrated in the first code example.

Beyond DevTools, we can embed rudimentary timing mechanisms directly into our code. console.time() and console.timeEnd() offer a swift, low-overhead method for measuring the execution duration of arbitrary code blocks, logging the results directly to the console. While less integrated than the Performance API, it serves as an excellent first-line diagnostic for suspicious functions. Our mission is to transform raw timing data into a surgical plan of attack, leveraging these tools to decode the main thread's performance narrative and engineer a smoother user experience.

/*
 * Example 1: Programmatic Measurement with Performance API
 * Use performance.mark() and performance.measure() to define custom timing marks
 * that appear in DevTools' Performance tab.
 */
function performMonitoredTask() {
    performance.mark('start_monitored_task');
    
    // Simulate a task, potentially a long one
    let sum = 0;
    for (let i = 0; i < 50_000_000; i++) {
        sum += Math.random();
    }
    console.log(`Computed sum: ${sum.toFixed(2)}`);

    performance.mark('end_monitored_task');
    performance.measure('My Monitored Task', 'start_monitored_task', 'end_monitored_task');
    
    // You can also get the entry directly
    const measures = performance.getEntriesByName('My Monitored Task');
    if (measures.length > 0) {
        console.log(`Programmatic measurement: My Monitored Task took ${measures[0].duration.toFixed(2)} ms.`);
    }
}

// To observe this in DevTools:
// 1. Open DevTools (Performance tab).
// 2. Start recording.
// 3. Call performMonitoredTask() in the console.
// 4. Stop recording. Look for 'My Monitored Task' in the Timings section or Flame Chart.

/*
 * Example 2: Using console.time() for Quick Task Timing
 * A simpler method for basic task duration measurement.
 */
function performQuickTimedTask() {
    console.time('Quick Task');
    let product = 1;
    for (let i = 0; i < 20_000_000; i++) {
        product *= Math.sin(i * Math.PI / 180) + 1.01; // Avoid zero
    }
    console.log(`Computed product: ${product.toFixed(2)}`);
    console.timeEnd('Quick Task');
}

// To observe this:
// 1. Call performQuickTimedTask() in the browser console.
// 2. The duration will be logged directly to the console.
//    This method is good for quick checks but doesn't integrate into the Performance flame chart.

/*
 * To effectively use DevTools for identification:
 * 1. Open DevTools (F12 or Cmd+Option+I).
 * 2. Navigate to the 'Performance' panel.
 * 3. Enable 'Screenshots' and 'Disable JavaScript samples' for detailed call stacks.
 * 4. Click the 'Record' button (the circle icon).
 * 5. Interact with your application or trigger the suspected long task(s).
 * 6. Click 'Stop' when you've captured sufficient activity.
 * 7. In the 'Main' section of the flame chart, identify long tasks (red triangle in top-right corner, or duration > 50ms).
 * 8. Zoom into the long task to inspect its call stack, identifying the specific functions consuming time.
 * 9. Utilize the 'Bottom-Up' or 'Call Tree' tabs for aggregated time consumption by function.
 */

Activate Strategies: Decomposing and Deferring Long JavaScript Tasks

Conquering long tasks demands a strategic shift: instead of executing monolithic operations, we decompose and defer. Our primary objective is to yield control of the main thread back to the browser at frequent intervals, preserving responsiveness. We deploy several potent techniques to achieve this:

Time Slicing: This technique involves breaking a large, synchronous task into smaller, manageable chunks, executing each chunk asynchronously. The browser receives intermittent opportunities to process user input, animations, and rendering updates. The simplest implementation leverages setTimeout(func, 0), which schedules the next chunk to run as a new macrotask, effectively yielding control. For more advanced scenarios, requestIdleCallback() offers a sophisticated mechanism to schedule low-priority work during browser idle periods, ensuring it doesn't interfere with critical rendering paths. However, its browser support and guarantee of execution are less robust than setTimeout(0). The first code example demonstrates how to implement time slicing for a large data processing task, preventing a single, blocking operation.
Web Workers: For truly CPU-intensive computations that do not require direct DOM access, we offload them to a Web Worker. These execute in a separate thread, entirely isolated from the main thread. Communication occurs via message passing (postMessage() and onmessage()). This strategy is transformative for tasks like complex data processing, image manipulation, or heavy cryptographic operations, ensuring the main thread remains free for UI updates. The second code example illustrates the setup and interaction with a basic Web Worker.
Debouncing and Throttling: These techniques are critical for optimizing event handlers, preventing functions from executing too frequently in response to rapid events (e.g., scrolling, resizing, typing).

Debouncing: Ensures a function is only called after a certain period of inactivity. If the event fires again before the delay, the timer resets. Ideal for search inputs or form validations.
Throttling: Limits a function's execution to at most once per a specified time interval. Useful for scroll events or resizing where continuous updates are acceptable but not excessively frequent. The third code example provides a robust debounce implementation.

Code Splitting and Lazy Loading: Reduce the initial JavaScript payload by splitting your application's code into smaller bundles. Load these bundles only when they are needed (e.g., when a user navigates to a specific route or interacts with a particular component). This minimizes the initial parse and execution time on the main thread, leading to faster Time to Interactive (TTI).
Virtualization (Windowing): When displaying large lists or tables, render only the items currently visible in the viewport. This dramatically reduces the number of DOM elements the browser must manage, preventing long rendering tasks associated with extensive DOM manipulation. Libraries like React Window or Vue Virtual Scroller implement this effectively.

By integrating these strategies, we systematically dismantle long tasks, ensuring that our applications deliver a consistently fluid and responsive user experience. This proactive approach transforms potential bottlenecks into opportunities for superior performance.

/*
 * Example 1: Time Slicing with setTimeout(0)
 * Break down a large, synchronous task into smaller, asynchronous chunks.
 */
function processLargeArray(data, callback) {
    const chunkSize = 100; // Number of items to process per chunk
    let currentIndex = 0;
    let processedResults = [];

    function processChunk() {
        const start = currentIndex;
        const end = Math.min(currentIndex + chunkSize, data.length);

        for (let i = start; i < end; i++) {
            // Simulate some computation for each item
            processedResults.push(data[i] * 2);
        }

        currentIndex = end;

        if (currentIndex < data.length) {
            // Defer the next chunk to the next macrotask, yielding to the browser
            setTimeout(processChunk, 0);
        } else {
            // All chunks processed, call the final callback
            callback(processedResults);
        }
    }

    processChunk(); // Start the first chunk
}

// Usage example:
// const largeData = Array.from({ length: 100000 }, (_, i) => i);
// processLargeArray(largeData, (results) => {
//     console.log('All data processed:', results.length);
//     // Further actions with results
// });

/*
 * Example 2: Offloading with Web Workers
 * Perform heavy computation in a separate thread.
 */
// worker.js (create a separate file for this)
/*
// worker.js
self.onmessage = function(e) {
    const data = e.data;
    let result = 0;
    for (let i = 0; i < data.iterations; i++) {
        result += Math.sqrt(i) * Math.sin(i);
    }
    self.postMessage(result);
};
*/

// Main script (in your main HTML/JS file)
function startWebWorkerTask() {
    if (window.Worker) {
        const myWorker = new Worker('worker.js'); // Path to your worker file
        console.log('Starting Web Worker task...');
        myWorker.postMessage({ iterations: 1_000_000_000 }); // Send data to worker

        myWorker.onmessage = function(e) {
            console.log('Web Worker finished. Result:', e.data);
            myWorker.terminate(); // Clean up the worker
        };

        myWorker.onerror = function(error) {
            console.error('Web Worker error:', error);
        };

    } else {
        console.warn('Web Workers are not supported in this browser.');
        // Fallback to synchronous execution or alternative strategy
    }
}

// To run this:
// 1. Create a file named 'worker.js' with the content above.
// 2. Call startWebWorkerTask() in your main script.
// 3. Observe the main thread remaining responsive while the worker computes.

/*
 * Example 3: Debouncing an Input Event
 * Limit the rate at which a function is called in response to events.
 */
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

function handleSearchInput(event) {
    console.log('Searching for:', event.target.value);
    // Simulate an API call or heavy filtering logic here
}

// Attach the debounced function to an input element
// const searchInput = document.getElementById('search-box');
// if (searchInput) {
//     searchInput.addEventListener('input', debounce(handleSearchInput, 300));
// }
// HTML: <input type="text" id="search-box" placeholder="Type to search...">

Optimize and Monitor: Advanced Strategies for Sustained JavaScript Performance

Our journey to high-performance JavaScript extends beyond basic identification and deferral; it demands continuous optimization and vigilant monitoring. We implement advanced strategies to minimize execution time and proactively address potential regressions. First, we forge efficient algorithms and data structures. A poorly chosen algorithm can easily transform a simple task into a long one, irrespective of deferral. Prioritize algorithms with lower time complexity (e.g., O(n) or O(log n) over O(n^2) or O(n!) for large datasets) and select data structures that optimize access and modification patterns specific to your use case. Minimizing DOM manipulation, particularly avoiding frequent read-write cycles, is paramount. The second code example starkly illustrates the performance degradation caused by 'layout thrashing' and the superior approach of batching DOM reads and writes.

Understanding JavaScript's event loop, microtask, and macrotask queues empowers surgical optimization. Microtasks (e.g., Promise callbacks, MutationObserver) execute after the current script finishes but before the next macrotask (e.g., setTimeout, requestAnimationFrame). A cascade of microtasks can effectively become a long task itself, blocking rendering. Strategically scheduling work into macrotasks ensures browser responsiveness. We also deploy memoization and caching for expensive, pure function calls. By storing results of previous computations, we bypass redundant calculations when the same inputs reoccur. The first code example demonstrates a practical memoization utility, dramatically reducing execution time for repetitive, expensive operations.

CSS optimizations play a critical, often overlooked, role. Avoiding forced synchronous layouts and layout thrashing ensures rendering efficiency. Prioritize CSS properties that trigger fewer layout or paint recalculations. Use CSS transforms and opacity for animations over properties like width, height, or top/left, which often force costly reflows. Finally, our commitment to performance extends into production. We integrate Real User Monitoring (RUM) tools and leverage browser APIs like the Performance Observer to track Long Tasks and Core Web Vitals in real-world user scenarios. This proactive monitoring identifies new bottlenecks and validates the effectiveness of our optimizations. Common pitfalls include excessive reliance on large third-party libraries without tree-shaking, unoptimized third-party scripts, and neglecting browser-level performance warnings. By embracing these advanced strategies, we engineer resilient, high-performance applications capable of navigating the frontiers of web interactivity.

/*
 * Example 1: Memoization for Expensive Function Calls
 * Cache the results of expensive function calls and return the cached result
 * when the same inputs occur again.
 */
function memoize(func) {
    const cache = {};
    return function(...args) {
        const key = JSON.stringify(args); // Simple key for demonstration
        if (cache[key]) {
            console.log('Returning cached result for', key);
            return cache[key];
        }
        console.log('Computing result for', key);
        const result = func.apply(this, args);
        cache[key] = result;
        return result;
    };
}

// An expensive function to be memoized
function calculateFactorial(n) {
    if (n <= 1) return 1;
    let result = 1;
    for (let i = 2; i <= n; i++) {
        result *= i;
        // Simulate heavy computation
        for (let j = 0; j < 1_000_000; j++) Math.sqrt(j);
    }
    return result;
}

const memoizedFactorial = memoize(calculateFactorial);

// Usage:
// console.time('First call');
// console.log(memoizedFactorial(10)); // Will compute
// console.timeEnd('First call');

// console.time('Second call (cached)');
// console.log(memoizedFactorial(10)); // Will use cache, much faster
// console.timeEnd('Second call (cached)');

/*
 * Example 2: Avoiding Layout Thrashing (Forced Reflows) by Batching DOM Reads/Writes
 * This demonstrates the 'read-write-read-write' anti-pattern and its correction.
 */
function badDOMManipulation() {
    const elements = document.querySelectorAll('.box'); // Assume .box elements exist
    console.time('Bad DOM Op');
    elements.forEach(el => {
        const currentWidth = el.offsetWidth; // Read (forces reflow)
        el.style.width = `${currentWidth + 10}px`; // Write (invalidates layout)
        const newHeight = el.offsetHeight; // Read (forces another reflow)
        el.style.height = `${newHeight + 5}px`; // Write (invalidates layout)
    });
    console.timeEnd('Bad DOM Op');
}

function goodDOMManipulation() {
    const elements = document.querySelectorAll('.box');
    console.time('Good DOM Op');

    // Phase 1: Read all necessary values
    const widths = [];
    const heights = [];
    elements.forEach(el => {
        widths.push(el.offsetWidth);
        heights.push(el.offsetHeight);
    });

    // Phase 2: Write all necessary changes
    elements.forEach((el, index) => {
        el.style.width = `${widths[index] + 10}px`;
        el.style.height = `${heights[index] + 5}px`;
    });
    console.timeEnd('Good DOM Op');
}

// To test:
// 1. Add some divs with class 'box' to your HTML, e.g.:
//    <div class="box" style="width: 50px; height: 50px; background-color: lightblue;"></div>
//    (Repeat several times)
// 2. Open DevTools Performance tab, record, run badDOMManipulation() then goodDOMManipulation().
// 3. Compare their execution times and layout events.

Key Takeaways

Defining & Detecting Long Tasks

Long Task Definition: Any JavaScript execution block on the main thread exceeding 50ms, causing UI jank and unresponsiveness. It directly impacts Core Web Vitals like FID and TBT, degrading user experience and SEO.

Identification Tools:

Browser DevTools (Performance Tab): Primary tool. Use the flame chart to visually spot tasks > 50ms (red triangle).
CPU Throttling: Simulate slower devices to reveal hidden bottlenecks.
'Bottom-Up'/'Call Tree': Aggregate function timings to prioritize optimizations.
Performance API (performance.mark, performance.measure): Programmatically mark and measure specific code sections for detailed DevTools analysis.
console.time/console.timeEnd: Quick console-based timing for specific functions.

Core Strategies for Resolution

Decomposition & Deferral: Break large tasks into smaller, asynchronous chunks to yield control to the browser, maintaining responsiveness.

Time Slicing: Use setTimeout(func, 0) or requestIdleCallback() to execute tasks incrementally, allowing browser to render.
Web Workers: Offload CPU-intensive, non-DOM-dependent computations to a separate thread.
Debouncing & Throttling: Optimize event handlers (e.g., input, scroll) to limit execution frequency.
Code Splitting & Lazy Loading: Reduce initial JS bundle size and load code only when needed, minimizing initial main thread work.
Virtualization (Windowing): Render only visible elements in large lists/tables to reduce DOM overhead.

Advanced Optimization & Monitoring

Algorithmic Efficiency: Choose optimal algorithms and data structures (e.g., O(n) vs O(n^2)) to minimize computation time.

Memoization/Caching: Store results of expensive function calls to avoid redundant computations for same inputs.
DOM Batching: Avoid 'layout thrashing' by separating all DOM reads from all DOM writes.
Event Loop Understanding: Manage microtask queues to prevent their accumulation from becoming a blocking operation.
CSS Optimization: Prefer properties like transform/opacity for animations to minimize layout/paint recalculations.
Production Monitoring: Implement Real User Monitoring (RUM) and use the Performance Observer API to track long tasks and Core Web Vitals in real-world scenarios, ensuring sustained performance.

Editorial Team

← Forge Lightning-Fast JavaScript Delivery with Resource Hints Engineer V8-Friendly JavaScript for Peak Performance →

FAQ

What specifically defines a 'long task' in JavaScript?

A long task is any continuous block of JavaScript execution on the main thread that takes 50 milliseconds (ms) or longer to complete. This threshold is critical because it's the maximum duration a browser can spend on a single task while still maintaining a smooth 60 frames per second (fps) user interface. Exceeding 50ms results in visible jank, unresponsiveness, and delayed user input processing.
How does the main thread relate to long tasks and overall web performance?

The main thread is the single execution thread in a browser where most of the work happens: parsing HTML, styling, layout, painting, and executing JavaScript. When a long task monopolizes the main thread, it blocks all other operations, including rendering updates and user input processing. This leads to a frozen UI, high First Input Delay (FID), and increased Total Blocking Time (TBT), severely degrading user experience and impacting Core Web Vitals.
What are the most common causes of JavaScript long tasks?

Common causes include: heavy synchronous computations (e.g., large loops, complex calculations), extensive DOM manipulations (especially unoptimized ones leading to forced reflows), expensive event handlers, large initial JavaScript bundles that require significant parsing and execution time, and unoptimized third-party scripts (analytics, ads, etc.) that block the main thread during their initialization or execution.
Which browser tools are most effective for identifying long tasks?

The browser's Developer Tools, specifically the Performance tab, are the most effective. Use the flame chart in the 'Main' section to visually identify long tasks (blocks with a red triangle or duration > 50ms). The 'Bottom-Up' and 'Call Tree' tabs provide aggregated function timings. Additionally, the performance.mark() and performance.measure() APIs allow for programmatic timing of specific code sections, which then appear in the Performance tab for detailed analysis.
What's the difference between setTimeout(func, 0) and requestIdleCallback() for time slicing?

Both can yield to the browser, but they operate differently. setTimeout(func, 0) schedules func to run as a new macrotask at the earliest possible time, effectively breaking up long tasks and giving the browser a chance to render or process input. requestIdleCallback() is designed for lower-priority, non-essential work that should run during 'idle periods'—when the browser isn't busy with more critical tasks. It offers a deadline for execution. setTimeout(0) is generally more reliable for ensuring a task runs eventually, while requestIdleCallback() prioritizes responsiveness and may not execute if the browser is continuously busy. Browser support for requestIdleCallback() is also less universal.
When should I consider using Web Workers to fix long tasks?

You should consider using Web Workers when you have computationally intensive tasks that do not require direct access to the DOM or global browser objects. Examples include complex mathematical calculations, large data processing (sorting, filtering), cryptographic operations, or parsing large files. Offloading these tasks to a Web Worker (which runs in a separate thread) ensures that the main thread remains entirely free and responsive for UI updates and user interactions.