Optimizing Long Tasks and Task Splitting

1. Problem Description

The browser's main thread is single-threaded and is responsible for executing JavaScript, handling the DOM, calculating styles, etc. When a Task continuously occupies the main thread for more than 50 milliseconds (ms), it is defined as a Long Task. Long tasks block critical operations such as user interaction and rendering, leading to page lag (e.g., unresponsive clicks, dropped animation frames), which negatively impacts user experience and the Interaction to Next Paint (INP) metric in Core Web Vitals.

Common sources of long tasks:

• Complex JavaScript computations (e.g., sorting large datasets, recursive operations).
• Synchronous DOM manipulations (e.g., frequently modifying the DOM within loops).
• Parsing large amounts of data (e.g., JSON parsing, Canvas rendering).

2. Optimization Approach: Splitting Long Tasks

The core objective is to split long tasks into multiple short tasks (each < 50ms), allowing the main thread to promptly respond to user input or rendering. Here are progressive optimization methods:

Step 1: Identify Long Tasks

• Use the Performance panel in Chrome DevTools to record page runtime and observe long tasks on the main thread (marked with red blocks).
• Dynamically monitor long tasks using the PerformanceObserver API:

  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
      console.log("Long task duration:", entry.duration, "ms");
    });
  });
  observer.observe({ entryTypes: ["longtask"] });
  

Step 2: Task Splitting Strategies

Strategy 1: Use setTimeout or setInterval
Split the task into multiple subtasks and execute them in batches via timers. For example, when processing a large array:

// Before optimization: Synchronous loop causes a long task
function processData(data) {
  for (let i = 0; i < data.length; i++) {
    // Complex computation...
  }
}

// After optimization: Execute in batches
function processInBatches(data, batchSize = 100) {
  let index = 0;
  function nextBatch() {
    const end = Math.min(index + batchSize, data.length);
    for (; index < end; index++) {
      // Process a single data item...
    }
    if (index < data.length) {
      // Defer remaining tasks to the next event loop
      setTimeout(nextBatch, 0);
    }
  }
  nextBatch();
}

Note: Setting setTimeout's delay to 0 indicates splitting the task into independent macro tasks to avoid blocking the main thread.

Strategy 2: Use requestIdleCallback
Execute low-priority tasks during the browser's idle periods to avoid impacting critical operations:

function idleTimeProcessing(data) {
  let index = 0;
  function processChunk(deadline) {
    while (index < data.length && deadline.timeRemaining() > 0) {
      // Process a single data item within idle time...
      index++;
    }
    if (index < data.length) {
      requestIdleCallback(processChunk); // Continue scheduling remaining tasks
    }
  }
  requestIdleCallback(processChunk);
}

Applicable scenarios: Non-urgent tasks (e.g., log reporting, preloading resources).

Strategy 3: Use Web Workers
Offload pure computation-intensive tasks (e.g., image analysis, encryption/decryption) to a Web Worker thread, completely avoiding main thread blockage:

// Main thread
const worker = new Worker("task.js");
worker.postMessage(largeData);
worker.onmessage = (e) => {
  // Receive the result
};

// task.js
self.onmessage = (e) => {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

Step 3: Optimize DOM Operations

• Reduce Reflows: Use documentFragment or offline DOM for batch operations.
• Use requestAnimationFrame: Align animation-related computations with rendering frames to avoid layout thrashing.

3. Trade-offs and Considerations

• Task splitting may increase total duration: However, it significantly improves page responsiveness.
• Avoid over-splitting: Excessive microtasks (e.g., Promise) or macrotasks (e.g., setTimeout) may increase scheduling overhead.
• Priority management: User interaction tasks (e.g., click events) should have higher priority than automatically executed tasks.

By splitting long tasks, you can effectively reduce main thread blockage and enhance page fluidity and response speed.