Minimize and defer JavaScript by splitting code, removing unused code, and lazy-loading non-essential features; 2. Break long tasks into smaller chunks using setTimeout or requestIdleCallback to maintain responsiveness; 3. Offload heavy computation to Web Workers to free the main thread; 4. Optimize rendering by avoiding forced layouts, using efficient animations, and throttling events with requestAnimationFrame; 5. Reduce DOM size and complexity by limiting nodes and using virtualization for long lists; 6. Use efficient CSS with simple selectors and avoid expensive properties; 7. Preload critical resources and preconnect to third-party origins to reduce blocking—all to keep the main thread light, responsive, and capable of delivering fast, smooth user experiences.

Reducing main-thread work is crucial for improving web performance, especially for delivering smooth user interactions and fast load times. The main thread handles HTML parsing, JavaScript execution, layout, painting, and more—so overloading it can lead to jank, delayed responses, and poor Core Web Vitals scores. Here are practical techniques to reduce main-thread work:

1. Minimize and Defer JavaScript Execution

JavaScript is one of the biggest contributors to main-thread congestion. Every script downloaded and executed blocks the thread unless handled carefully.

• Code splitting: Break your JavaScript into smaller chunks and load only what’s needed for the current view (e.g., using dynamic import() with React.lazy or webpack).
• Defer non-critical scripts: Use the defer attribute on <script></script> tags so scripts run after HTML parsing.
• Remove unused code: Use tree-shaking (via bundlers like Webpack or Vite) to eliminate dead code.
• Lazy-load non-essential features: Delay loading analytics, chat widgets, or heavy libraries until after the initial interaction.

Example: Instead of loading an entire charting library upfront, load it only when the user navigates to a dashboard page.

2. Optimize Long Tasks with Task Scheduling

Long-running tasks block the main thread and prevent user input from being processed. Break them into smaller chunks.

• Use setTimeout or requestIdleCallback to yield control back to the browser:

  function processInChunks(items, callback) {
    let index = 0;
    function processChunk() {
      const end = Math.min(index   10, items.length);
      for (; index < end; index  ) {
        callback(items[index]);
      }
      if (index < items.length) {
        setTimeout(processChunk, 0); // Yield to main thread
      }
    }
    processChunk();
  }

• requestIdleCallback lets you run low-priority work during idle periods:

  requestIdleCallback(() => {
    // Update analytics, cache data, etc.
  });

This keeps the thread responsive during user interactions.

3. Leverage Web Workers for Heavy Computation

Move CPU-intensive tasks off the main thread using Web Workers.

• Use cases: image processing, large data parsing, encryption, or complex calculations.
• Workers run in the background and communicate via postMessage.

Example: Parsing a large JSON file or performing search indexing can be done in a worker so the UI stays responsive.

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

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

Note: Workers can’t access the DOM, so they’re best for pure computation.

4. Optimize Rendering and Layout

Expensive styles and layout thrashing can stall the main thread.

• Avoid forced synchronous layouts:

  // BAD: Forces layout
  element.style.height = computedHeight   'px';
  const offset = element.offsetTop;
  
  // GOOD: Batch reads and writes
  const offset = element.offsetTop;
  element.style.height = offset   'px';

• Use transform and opacity for animations—they don’t trigger layout or paint.

• Debounce or throttle event handlers like scroll, resize, and input to reduce function calls.

Example: Instead of recalculating layout on every scroll event, use requestAnimationFrame:

let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
// Handle scroll logic
ticking = false;
});
ticking = true;
}
});

---

5. Reduce DOM Size and Complexity

Large DOM trees increase parsing and layout time.

• Keep the DOM lean: avoid deeply nested structures.
• Limit the number of DOM nodes (ideally under 1,500 per page).
• Use virtualization for long lists (e.g., react-window or vue-virtual-scroller) so only visible items are rendered.

Example: A table with 10,000 rows should only render ~10–20 visible rows at a time, not all at once.

---

6. Use Efficient CSS Selectors and Avoid Expensive Properties

Complex CSS selectors and properties can slow down style calculation and painting.

• Avoid deep nesting and overly specific selectors (e.g., div ul li a strong).
• Minimize use of @import, which blocks CSS parsing.
• Steer clear of properties that trigger repaints or layout (e.g., box-shadow on many elements).

Instead:

• Use class-based styling.
• Limit the scope of CSS with frameworks like CSS-in-JS or Shadow DOM.

---

7. Preload and Prioritize Critical Resources

Reduce blocking time during initial load.

• Use rel="preload" for critical fonts, scripts, or assets.
• Preconnect to third-party origins: <link rel="preconnect" href="https://cdn.example.com">.
• Load non-critical CSS asynchronously (e.g., with rel="preload" onload swap).

This ensures the main thread isn’t waiting on network delays.

---

Reducing main-thread work isn’t about eliminating JavaScript—it’s about smart scheduling, offloading, and optimizing how and when work happens. Focus on chunking tasks, using workers, and simplifying rendering. The result? Faster loads, smoother interactions, and a better user experience.

Basically, keep the main thread light and responsive—it’s the key to a fast-feeling app.

The above is the detailed content of Techniques for Reducing Main-Thread Work. For more information, please follow other related articles on the PHP Chinese website!