Web Workersとメインスレッド外処理

When you interact with a website, everything you see and click is handled by the browser's main thread. This thread is like a single lane highway for all your JavaScript code, UI updates, and event handling.

If a heavy task runs on this main thread, it can block everything else, making your website freeze and feel unresponsive. This is where Web Workers come in!

The main thread is crucial for a smooth user experience. It's responsible for:

• Parsing HTML and CSS
• Executing JavaScript
• Handling user events (clicks, scrolls)
• Updating the user interface (rendering pixels)

Because JavaScript is single-threaded in the browser, a long-running script on the main thread will pause all these activities, leading to a 'frozen' UI.

Web Workers allow you to run scripts in the background, in a separate thread, without interfering with the main execution thread of the browser. Think of it as giving your browser an extra lane on the highway for heavy traffic.

• They perform tasks off the main thread.
• They keep the UI responsive during intensive operations.
• They communicate with the main thread by sending messages.

There are a few types of Web Workers, but the most common and what we'll focus on are Dedicated Workers.

• Dedicated Workers: Used by a single script. Each instance is tied to one main thread script.
• Shared Workers: Can be accessed by multiple scripts, even from different windows/iframes.
• Service Workers: Used for advanced features like offline experiences, caching, and push notifications (a more specialized type).

Creating a dedicated Web Worker is straightforward. You instantiate a Worker object, passing the URL of the script that the worker will execute.

This worker script runs in its own isolated global context.

The main thread communicates with a worker using the postMessage() method. This method sends a message (which can be a string, JSON object, or other data) to the worker.

The data is copied, not shared, between the main thread and the worker.

To get results or updates from a worker, the main thread listens for the message event on the worker object. The data sent by the worker is available in event.data.

Similarly, the worker script itself listens for messages using self.onmessage.

The script loaded by the worker runs in its own isolated environment. It doesn't have direct access to the DOM or the window object, but it has its own global scope, represented by self.

The worker sends messages back to the main thread using self.postMessage().

Here's a demo using a Web Worker to perform a heavy calculation. Observe how the main thread remains responsive (simulated by log messages) while the worker does its job.

First, here's the content for worker.js that performs a sum:

// worker.js
self.onmessage = function(event) {
  let sum = 0;
  const limit = event.data; // Expecting a number
  console.log('Worker: Starting calculation for limit:', limit);
  for (let i = 0; i < limit; i++) {
    sum += i; // A computationally heavy loop
  }
  self.postMessage(sum);
  console.log('Worker: Calculation finished and result sent.');
};

And here's the main script that creates and communicates with it. Try running it!

While powerful, Web Workers have some limitations due to their isolated nature:

• No DOM Access: Workers cannot directly access or manipulate the Document Object Model (DOM).
• No Window Object: They cannot access the window, document, or parent objects.
• Local Files: They cannot access local files directly (e.g., file:// protocol) in all browsers.
• Communication: All communication must happen via message passing (postMessage and onmessage).

Great job! You've learned how Web Workers can significantly improve your web application's performance and responsiveness.

• Web Workers run scripts in the background, off the main thread.
• They prevent the UI from freezing during heavy computations.
• Communication occurs through message passing (postMessage and onmessage).
• Workers cannot directly access the DOM or window object.

By effectively using Web Workers, you can create smoother, more engaging user experiences.